<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/Frog_32px_1177822_easyicon.net.ico">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/Frog_32px_1177822_easyicon.net.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/Frog_16px_1177822_easyicon.net.ico">
  <link rel="mask-icon" href="/images/Frog_32px_1177822_easyicon.net.ico" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="/lib/pace/pace-theme-minimal.min.css">
  <script src="/lib/pace/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"hxy1997.xyz","root":"/","scheme":"Pisces","version":"7.8.0","exturl":false,"sidebar":{"position":"left","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":true,"pangu":false,"comments":{"style":"tabs","active":"valine","storage":true,"lazyload":true,"nav":null,"activeClass":"valine"},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"输入关键字","hits_empty":"没有找到与「${query}」相关搜索","hits_stats":"${hits} 条相关记录，共耗时 ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.json"};
  </script>

  <meta name="description" content="国外前端会考察哪些问题？js函数、系统设计、TS类型体操的用法，大大拓宽了我的眼界，去思考和实战更加相关的问题吧，还有一个Type-challenges，经常更新一个新的Type实现：TypeScript 类型体操姿势合集">
<meta property="og:type" content="article">
<meta property="og:title" content="bigfrontend的TS题目讨论">
<meta property="og:url" content="https://hxy1997.xyz/2022/08/17/bigfrontend%E7%9A%84TS%E9%A2%98%E7%9B%AE%E8%AE%A8%E8%AE%BA/index.html">
<meta property="og:site_name" content="hxy的博客">
<meta property="og:description" content="国外前端会考察哪些问题？js函数、系统设计、TS类型体操的用法，大大拓宽了我的眼界，去思考和实战更加相关的问题吧，还有一个Type-challenges，经常更新一个新的Type实现：TypeScript 类型体操姿势合集">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2022-08-17T14:00:00.000Z">
<meta property="article:modified_time" content="2022-09-09T01:22:46.814Z">
<meta property="article:author" content="hxy">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="bigfrontend">
<meta property="article:tag" content="题库">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://hxy1997.xyz/2022/08/17/bigfrontend%E7%9A%84TS%E9%A2%98%E7%9B%AE%E8%AE%A8%E8%AE%BA/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>bigfrontend的TS题目讨论 | hxy的博客</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="hxy的博客" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">hxy的博客</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">Mia san Mia!</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>

  <a href="https://github.com/huxingyi1997" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://hxy1997.xyz/2022/08/17/bigfrontend%E7%9A%84TS%E9%A2%98%E7%9B%AE%E8%AE%A8%E8%AE%BA/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/Robben.gif">
      <meta itemprop="name" content="hxy">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="hxy的博客">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          bigfrontend的TS题目讨论
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2022-08-17 22:00:00" itemprop="dateCreated datePublished" datetime="2022-08-17T22:00:00+08:00">2022-08-17</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-09-09 09:22:46" itemprop="dateModified" datetime="2022-09-09T09:22:46+08:00">2022-09-09</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/web%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">web前端</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="热度" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">热度：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span>
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="far fa-comment"></i>
      </span>
      <span class="post-meta-item-text">Valine：</span>
    
    <a title="valine" href="/2022/08/17/bigfrontend%E7%9A%84TS%E9%A2%98%E7%9B%AE%E8%AE%A8%E8%AE%BA/#valine-comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/2022/08/17/bigfrontend%E7%9A%84TS%E9%A2%98%E7%9B%AE%E8%AE%A8%E8%AE%BA/" itemprop="commentCount"></span>
    </a>
  </span>
  
  

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <p>国外前端会考察哪些问题？js函数、系统设计、TS类型体操的用法，大大拓宽了我的眼界，去思考和实战更加相关的问题吧，还有一个Type-challenges，经常更新一个新的Type实现：<a target="_blank" rel="noopener" href="https://github.com/type-challenges/type-challenges">TypeScript 类型体操姿势合集</a></p>
<span id="more"></span>

<h1 id="TypeScript类型体操"><a href="#TypeScript类型体操" class="headerlink" title="TypeScript类型体操"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript">TypeScript类型体操</a></h1><p>这一部分很有意思，你写过一遍之后，对于TS里怎么用这些方法更加得心应手</p>
<h2 id="1-implement-Partial-lt-T-gt"><a href="#1-implement-Partial-lt-T-gt" class="headerlink" title="1. implement Partial&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Partial-T">1. implement Partial&lt;T&gt;</a></h2><h3 id="题目"><a href="#题目" class="headerlink" title="题目"></a>题目</h3><p><code>Partial&lt;T&gt;</code> returns a type whichs represents all subsets of type <code>T</code>.</p>
<p>Please implement <code>MyPartial&lt;T&gt;</code> by yourself.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Foo = &#123;</span><br><span class="line">  a: <span class="built_in">string</span></span><br><span class="line">  b: <span class="built_in">number</span></span><br><span class="line">  c: <span class="built_in">boolean</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// below are all valid</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> a: MyPartial&lt;Foo&gt; = &#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> b: MyPartial&lt;Foo&gt; = &#123;</span><br><span class="line">  a: <span class="string">&#x27;BFE.dev&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> c: MyPartial&lt;Foo&gt; = &#123;</span><br><span class="line">  b: <span class="number">123</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> d: MyPartial&lt;Foo&gt; = &#123;</span><br><span class="line">  b: <span class="number">123</span>,</span><br><span class="line">  c: <span class="literal">true</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> e: MyPartial&lt;Foo&gt; = &#123;</span><br><span class="line">  a: <span class="string">&#x27;BFE.dev&#x27;</span>,</span><br><span class="line">  b: <span class="number">123</span>,</span><br><span class="line">  c: <span class="literal">true</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="答案"><a href="#答案" class="headerlink" title="答案"></a>答案</h3><p>找到键的索引，全部用<code>?</code>转化为可选</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> MyPartial&lt;T&gt; = &#123;</span><br><span class="line">  [key <span class="keyword">in</span> keyof T] ?: T[key];</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>keyof</code> 索引查询 对应任何类型 <code>T</code>,<code>keyof</code> <code>T</code>的结果为该类型上所有公有属性<code>key</code>的联合：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> Eg1 &#123;</span><br><span class="line">  name: <span class="built_in">string</span>,</span><br><span class="line">  <span class="keyword">readonly</span> age: <span class="built_in">number</span>,</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// T1的类型实则是name | age</span></span><br><span class="line"><span class="keyword">type</span> T1 = keyof Eg1</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Eg2</span> </span>&#123;</span><br><span class="line">  <span class="keyword">private</span> name: <span class="built_in">string</span>;</span><br><span class="line">  <span class="keyword">public</span> <span class="keyword">readonly</span> age: <span class="built_in">number</span>;</span><br><span class="line">  <span class="keyword">protected</span> home: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// T2实则被约束为 age</span></span><br><span class="line"><span class="comment">// 而name和home不是公有属性，所以不能被keyof获取到</span></span><br><span class="line"><span class="keyword">type</span> T2 = keyof Eg2</span><br></pre></td></tr></table></figure>



<h2 id="2-implement-Required-lt-T-gt"><a href="#2-implement-Required-lt-T-gt" class="headerlink" title="2. implement Required&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Required-T">2. implement Required&lt;T&gt;</a></h2><h3 id="题目-1"><a href="#题目-1" class="headerlink" title="题目"></a>题目</h3><p>As the opposite of <a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Partial-T">Partial</a>, <code>Required&lt;T&gt;</code> sets all properties of <code>T</code> to required.</p>
<p>Please implement <code>MyRequired&lt;T&gt;</code> by yourself.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// all properties are optional</span></span><br><span class="line"><span class="keyword">type</span> Foo = &#123;</span><br><span class="line">  a?: <span class="built_in">string</span></span><br><span class="line">  b?: <span class="built_in">number</span></span><br><span class="line">  c?: <span class="built_in">boolean</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> a: MyRequired&lt;Foo&gt; = &#123;&#125;</span><br><span class="line"><span class="comment">// Error</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> b: MyRequired&lt;Foo&gt; = &#123;</span><br><span class="line">  a: <span class="string">&#x27;BFE.dev&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// Error</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> c: MyRequired&lt;Foo&gt; = &#123;</span><br><span class="line">  b: <span class="number">123</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// Error</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> d: MyRequired&lt;Foo&gt; = &#123;</span><br><span class="line">  b: <span class="number">123</span>,</span><br><span class="line">  c: <span class="literal">true</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// Error</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> e: MyRequired&lt;Foo&gt; = &#123;</span><br><span class="line">  a: <span class="string">&#x27;BFE.dev&#x27;</span>,</span><br><span class="line">  b: <span class="number">123</span>,</span><br><span class="line">  c: <span class="literal">true</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// valid</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-1"><a href="#答案-1" class="headerlink" title="答案"></a>答案</h3><p>找到键的索引，全部用<code>-?</code>转化为必选</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> MyPartial&lt;T&gt; = &#123;</span><br><span class="line">  <span class="comment">// the &#x27;optional&#x27; symbol = &#x27;?&#x27;</span></span><br><span class="line">  <span class="comment">// the &#x27;not&#x27; symbol = &#x27;-&#x27;</span></span><br><span class="line">  <span class="comment">// key is not optional in T</span></span><br><span class="line">  [key <span class="keyword">in</span> keyof T] -?: T[key];</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="3-implement-Readonly-lt-T-gt"><a href="#3-implement-Readonly-lt-T-gt" class="headerlink" title="3. implement Readonly&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Readonly-T">3. implement Readonly&lt;T&gt;</a></h2><h3 id="题目-2"><a href="#题目-2" class="headerlink" title="题目"></a>题目</h3><p><code>Readonly&lt;T&gt;</code> returns a type that sets all properties of <code>T</code> to <code>readonly</code>.</p>
<p>Pleaes implement <code>MyReadonly&lt;T&gt;</code> by yourself.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Foo = &#123;</span><br><span class="line">  a: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> a:Foo = &#123;</span><br><span class="line">  a: <span class="string">&#x27;BFE.dev&#x27;</span>,</span><br><span class="line">&#125;</span><br><span class="line">a.a = <span class="string">&#x27;bigfrontend.dev&#x27;</span></span><br><span class="line"><span class="comment">// OK</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> b:MyReadonly&lt;Foo&gt; = &#123;</span><br><span class="line">  a: <span class="string">&#x27;BFE.dev&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line">b.a = <span class="string">&#x27;bigfrontend.dev&#x27;</span></span><br><span class="line"><span class="comment">// Error</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-2"><a href="#答案-2" class="headerlink" title="答案"></a>答案</h3><p>找到键的索引，全部用<code>readonly</code>转化为只读属性，keyof   索引类型查询操作符。 对于任何类型 <code>T</code>， <code>keyof T</code>的结果为 <code>T</code>上已知的公共属性名的联合。T[P] 索引访问操作符。根据属性名获得对应类型。</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> MyReadonly&lt;T&gt; = &#123;</span><br><span class="line">  <span class="keyword">readonly</span> [key <span class="keyword">in</span> keyof T]: T[key]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="4-implement-Record-lt-K-V-gt"><a href="#4-implement-Record-lt-K-V-gt" class="headerlink" title="4. implement Record&lt;K, V&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Record-K-V">4. implement Record&lt;K, V&gt;</a></h2><h3 id="题目-3"><a href="#题目-3" class="headerlink" title="题目"></a>题目</h3><p><code>Record&lt;K, V&gt;</code> returns an object type with keys of K and values of V.</p>
<p>Please implement <code>MyRecord&lt;K, V&gt;</code> by yourself.</p>
<p>Notice that property key could only be <code>number | string | symbol</code>.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Key = <span class="string">&#x27;a&#x27;</span> | <span class="string">&#x27;b&#x27;</span> | <span class="string">&#x27;c&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> a: Record&lt;Key, <span class="built_in">string</span>&gt; = &#123;</span><br><span class="line">  a: <span class="string">&#x27;BFE.dev&#x27;</span>,</span><br><span class="line">  b: <span class="string">&#x27;BFE.dev&#x27;</span>,</span><br><span class="line">  c: <span class="string">&#x27;BFE.dev&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line">a.a = <span class="string">&#x27;bigfrontend.dev&#x27;</span> <span class="comment">// OK</span></span><br><span class="line">a.b = <span class="number">123</span> <span class="comment">// Error</span></span><br><span class="line">a.d = <span class="string">&#x27;BFE.dev&#x27;</span> <span class="comment">// Error</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Foo = MyRecord&lt;&#123;<span class="attr">a</span>: <span class="built_in">string</span>&#125;, <span class="built_in">string</span>&gt; <span class="comment">// Error</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-3"><a href="#答案-3" class="headerlink" title="答案"></a>答案</h3><p>这个稍微复杂一些，需要用<code>extends</code>表明键的类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> MyRecord &lt;K <span class="keyword">extends</span> <span class="built_in">string</span> | <span class="built_in">number</span> | symbol, V&gt; = &#123;</span><br><span class="line">  [key <span class="keyword">in</span> K]: V</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="5-implement-Pick-lt-T-K-gt"><a href="#5-implement-Pick-lt-T-K-gt" class="headerlink" title="5. implement Pick&lt;T, K&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Pick-T-K">5. implement Pick&lt;T, K&gt;</a></h2><h3 id="题目-4"><a href="#题目-4" class="headerlink" title="题目"></a>题目</h3><p><code>Pick&lt;T, K&gt;</code>, as the name implies, returns a new type by picking properties in K from T.</p>
<p>Please implement <code>MyPick&lt;T, K&gt;</code> by yourself.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Foo = &#123;</span><br><span class="line">  a: <span class="built_in">string</span></span><br><span class="line">  b: <span class="built_in">number</span></span><br><span class="line">  c: <span class="built_in">boolean</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> A = MyPick&lt;Foo, <span class="string">&#x27;a&#x27;</span> | <span class="string">&#x27;b&#x27;</span>&gt; <span class="comment">// &#123;a: string, b: number&#125;</span></span><br><span class="line"><span class="keyword">type</span> B = MyPick&lt;Foo, <span class="string">&#x27;c&#x27;</span>&gt; <span class="comment">// &#123;c: boolean&#125;</span></span><br><span class="line"><span class="keyword">type</span> C = MyPick&lt;Foo, <span class="string">&#x27;d&#x27;</span>&gt; <span class="comment">// Error</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-4"><a href="#答案-4" class="headerlink" title="答案"></a>答案</h3><p>同样，需要用<code>extends</code>表明键的范围</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> MyPick&lt;T, K <span class="keyword">extends</span> keyof T&gt; = &#123;</span><br><span class="line">  [key <span class="keyword">in</span> K]: T[key]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// we only want the property types from A that exist in B</span></span><br><span class="line"><span class="comment">// so the keys of B extend T</span></span><br><span class="line"><span class="comment">// meaning that B is found in T</span></span><br><span class="line"><span class="comment">// so we only return the keys(B) found in T</span></span><br></pre></td></tr></table></figure>



<h2 id="6-implement-Omit-lt-T-K-gt"><a href="#6-implement-Omit-lt-T-K-gt" class="headerlink" title="6. implement Omit&lt;T, K&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Omit-T-K">6. implement Omit&lt;T, K&gt;</a></h2><h3 id="题目-5"><a href="#题目-5" class="headerlink" title="题目"></a>题目</h3><p><code>Omit&lt;T, K&gt;</code> returns a new type by picking the properties in T but not in K.</p>
<p>Please implement <code>MyOmit&lt;T, K&gt;</code> by yourself.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Foo = &#123;</span><br><span class="line">  a: <span class="built_in">string</span></span><br><span class="line">  b: <span class="built_in">number</span></span><br><span class="line">  c: <span class="built_in">boolean</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> A = MyOmit&lt;Foo, <span class="string">&#x27;a&#x27;</span> | <span class="string">&#x27;b&#x27;</span>&gt; <span class="comment">// &#123;c: boolean&#125;</span></span><br><span class="line"><span class="keyword">type</span> B = MyOmit&lt;Foo, <span class="string">&#x27;c&#x27;</span>&gt; <span class="comment">// &#123;a: string, b: number&#125;</span></span><br><span class="line"><span class="keyword">type</span> C = MyOmit&lt;Foo, <span class="string">&#x27;c&#x27;</span> | <span class="string">&#x27;d&#x27;</span>&gt;  <span class="comment">// &#123;a: string, b: number&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-5"><a href="#答案-5" class="headerlink" title="答案"></a>答案</h3><p>需要用<code>extends</code>结合三目判断符进行判断，将找不到的键名赋值为never</p>
<p>Here is documentation about remapping: <a target="_blank" rel="noopener" href="https://www.typescriptlang.org/docs/handbook/2/mapped-types.html#key-remapping-via-as">https://www.typescriptlang.org/docs/handbook/2/mapped-types.html#key-remapping-via-as</a></p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> MyOmit&lt;T, K <span class="keyword">extends</span> keyof <span class="built_in">any</span>&gt; = &#123;</span><br><span class="line">  [key <span class="keyword">in</span> keyof T <span class="keyword">as</span> key <span class="keyword">extends</span> K ? <span class="built_in">never</span> : key]: T[key]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="7-implement-Exclude-lt-T-E-gt"><a href="#7-implement-Exclude-lt-T-E-gt" class="headerlink" title="7. implement Exclude&lt;T, E&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Exclude-T-E">7. implement Exclude&lt;T, E&gt;</a></h2><h3 id="题目-6"><a href="#题目-6" class="headerlink" title="题目"></a>题目</h3><p><code>Exclude&lt;T, K&gt;</code> returns a type by removing from T the union members that are assignable to K.</p>
<p>Please implement <code>MyExclude&lt;T, K&gt;</code> by yourself.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Foo = <span class="string">&#x27;a&#x27;</span> | <span class="string">&#x27;b&#x27;</span> | <span class="string">&#x27;c&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> A = MyExclude&lt;Foo, <span class="string">&#x27;a&#x27;</span>&gt; <span class="comment">// &#x27;b&#x27; | &#x27;c&#x27;</span></span><br><span class="line"><span class="keyword">type</span> B = MyExclude&lt;Foo, <span class="string">&#x27;c&#x27;</span>&gt; <span class="comment">// &#x27;a&#x27; | &#x27;b</span></span><br><span class="line"><span class="keyword">type</span> C = MyExclude&lt;Foo, <span class="string">&#x27;c&#x27;</span> | <span class="string">&#x27;d&#x27;</span>&gt;  <span class="comment">// &#x27;a&#x27; | &#x27;b&#x27;</span></span><br><span class="line"><span class="keyword">type</span> D = MyExclude&lt;Foo, <span class="string">&#x27;a&#x27;</span> | <span class="string">&#x27;b&#x27;</span> | <span class="string">&#x27;c&#x27;</span>&gt;  <span class="comment">// never</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-6"><a href="#答案-6" class="headerlink" title="答案"></a>答案</h3><p>需要用<code>extends</code>结合三目判断符进行判断，将找不到的键名赋值为never</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> MyExclude&lt;T, E&gt; = T <span class="keyword">extends</span> E ? <span class="built_in">never</span> : T</span><br><span class="line"><span class="comment">// for the part in T that exists in E</span></span><br><span class="line"><span class="comment">// don&#x27;t use it</span></span><br><span class="line"><span class="comment">// else, leave it </span></span><br></pre></td></tr></table></figure>



<h2 id="8-implement-Extract-lt-T-U-gt"><a href="#8-implement-Extract-lt-T-U-gt" class="headerlink" title="8. implement Extract&lt;T, U&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Extract-T-U">8. implement Extract&lt;T, U&gt;</a></h2><h3 id="题目-7"><a href="#题目-7" class="headerlink" title="题目"></a>题目</h3><p>As the opposite of <a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Exclude-T-E">Exclude</a>, <code>Extract&lt;T, U&gt;</code> returns a type by extracting union members from T that are assignable to U.</p>
<p>Please implement <code>MyExtract&lt;T, U&gt;</code> by yourself.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Foo = <span class="string">&#x27;a&#x27;</span> | <span class="string">&#x27;b&#x27;</span> | <span class="string">&#x27;c&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> A = MyExtract&lt;Foo, <span class="string">&#x27;a&#x27;</span>&gt; <span class="comment">// &#x27;a&#x27;</span></span><br><span class="line"><span class="keyword">type</span> B = MyExtract&lt;Foo, <span class="string">&#x27;a&#x27;</span> | <span class="string">&#x27;b&#x27;</span>&gt; <span class="comment">// &#x27;a&#x27; | &#x27;b&#x27;</span></span><br><span class="line"><span class="keyword">type</span> C = MyExtract&lt;Foo, <span class="string">&#x27;b&#x27;</span> | <span class="string">&#x27;c&#x27;</span> | <span class="string">&#x27;d&#x27;</span> | <span class="string">&#x27;e&#x27;</span>&gt;  <span class="comment">// &#x27;b&#x27; | &#x27;c&#x27;</span></span><br><span class="line"><span class="keyword">type</span> D = MyExtract&lt;Foo, <span class="built_in">never</span>&gt;  <span class="comment">// never</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-7"><a href="#答案-7" class="headerlink" title="答案"></a>答案</h3><p>需要用<code>extends</code>结合三目判断符进行判断，将找不到的键名赋值为never</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> MyExtract&lt;T, U&gt; = T <span class="keyword">extends</span> U ? T : <span class="built_in">never</span></span><br></pre></td></tr></table></figure>



<h2 id="9-implement-NonNullable-lt-T-gt"><a href="#9-implement-NonNullable-lt-T-gt" class="headerlink" title="9. implement NonNullable&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/NonNullable">9. implement NonNullable&lt;T&gt;</a></h2><h3 id="题目-8"><a href="#题目-8" class="headerlink" title="题目"></a>题目</h3><p><code>NonNullable&lt;T&gt;</code> returns a type by excluding <code>null</code> and <code>undefined</code> from T.</p>
<p>Please implement <code>MyNonNullable&lt;T&gt;</code> by yourself.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Foo = <span class="string">&#x27;a&#x27;</span> | <span class="string">&#x27;b&#x27;</span> | <span class="literal">null</span> | <span class="literal">undefined</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> A = MyNonNullable&lt;Foo&gt; <span class="comment">// &#x27;a&#x27; | &#x27;b&#x27;</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-8"><a href="#答案-8" class="headerlink" title="答案"></a>答案</h3><p>需要用<code>extends</code>结合三目判断符进行判断，将找不到的键名赋值为never</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> MyNonNullable&lt;T&gt; = T <span class="keyword">extends</span>(<span class="literal">null</span> | <span class="literal">undefined</span>) ? <span class="built_in">never</span> : T</span><br><span class="line"></span><br><span class="line"><span class="comment">// your code here, don&#x27;t use NonNullable&lt;T&gt; in your code</span></span><br><span class="line"><span class="comment">// i like this solution very much</span></span><br><span class="line"><span class="comment">// if the type is null | undefined</span></span><br><span class="line"><span class="comment">// that cannot be allowed </span></span><br><span class="line"><span class="comment">// all other types, we allow</span></span><br></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://stackoverflow.com/questions/51851677/how-to-get-argument-types-from-function-in-typescript/51851844">Stackoverflow post for help</a></p>
<h2 id="10-implement-Parameters-lt-T-gt"><a href="#10-implement-Parameters-lt-T-gt" class="headerlink" title="10. implement Parameters&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/Parameters">10. implement Parameters&lt;T&gt;</a></h2><h3 id="题目-9"><a href="#题目-9" class="headerlink" title="题目"></a>题目</h3><p>For function type T, <code>Parameters&lt;T&gt;</code> returns a tuple type from the types of its parameters.</p>
<p>Please implement <code>MyParameters&lt;T&gt;</code> by yourself.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Foo = <span class="function">(<span class="params">a: <span class="built_in">string</span>, b: <span class="built_in">number</span>, c: <span class="built_in">boolean</span></span>) =&gt;</span> <span class="built_in">string</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> A = MyParameters&lt;Foo&gt; <span class="comment">// [a:string, b: number, c:boolean]</span></span><br><span class="line"><span class="keyword">type</span> B = A[<span class="number">0</span>] <span class="comment">// string</span></span><br><span class="line"><span class="keyword">type</span> C = MyParameters&lt;&#123;<span class="attr">a</span>: <span class="built_in">string</span>&#125;&gt; <span class="comment">// Error</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-9"><a href="#答案-9" class="headerlink" title="答案"></a>答案</h3><p>需要用<code>infers</code>将输入参数提取出来，后面需要补充三目判断符做兜底</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> MyParameters&lt;T <span class="keyword">extends</span> (...args: <span class="built_in">any</span>[]) =&gt; <span class="built_in">any</span>&gt; = T <span class="keyword">extends</span> (...args: infer P) =&gt; <span class="built_in">any</span> ? P : <span class="built_in">never</span>;</span><br><span class="line"><span class="comment">// the type must be a function</span></span><br><span class="line"><span class="comment">// infers the type that is passed</span></span><br><span class="line"><span class="comment">// read the parameters from the function</span></span><br><span class="line"><span class="comment">// and returns a type that only allows those parameters</span></span><br></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://stackoverflow.com/questions/51851677/how-to-get-argument-types-from-function-in-typescript/51851844">Stackoverflow post for help</a></p>
<h2 id="11-implement-ConstructorParameters-lt-T-gt"><a href="#11-implement-ConstructorParameters-lt-T-gt" class="headerlink" title="11. implement ConstructorParameters&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/ConstructorParameters">11. implement ConstructorParameters&lt;T&gt;</a></h2><h3 id="题目-10"><a href="#题目-10" class="headerlink" title="题目"></a>题目</h3><p><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/Parameters">Parameters</a> handles function type. Similarly, <code>ConstructorParameters&lt;T&gt;</code> is meant for class, it returns a tuple type from the types of a constructor function T.</p>
<p>Please implement <code>MyConstructorParameters&lt;T&gt;</code> by yourself.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Foo</span> </span>&#123;</span><br><span class="line">  <span class="title">constructor</span> (<span class="params">a: <span class="built_in">string</span>, b: <span class="built_in">number</span>, c: <span class="built_in">boolean</span></span>) &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> C = MyConstructorParameters&lt;<span class="keyword">typeof</span> Foo&gt; </span><br><span class="line"><span class="comment">// [a: string, b: number, c: boolean]</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-10"><a href="#答案-10" class="headerlink" title="答案"></a>答案</h3><p>需要用<code>infers</code>将输入参数提取出来，后面需要补充三目判断符做兜底</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> MyConstructorParameters&lt;T <span class="keyword">extends</span> <span class="keyword">new</span> (...args: <span class="built_in">any</span>) =&gt; <span class="built_in">any</span>&gt; =</span><br><span class="line">T <span class="keyword">extends</span> <span class="keyword">new</span> (...args: infer P) =&gt; <span class="built_in">any</span> ? P : <span class="built_in">never</span></span><br><span class="line"><span class="comment">// check if the generic Type is a class type</span></span><br><span class="line"><span class="comment">// we can check using a property check</span></span><br><span class="line"><span class="comment">// then get all the args from the constructor</span></span><br><span class="line"><span class="comment">// and return those args</span></span><br></pre></td></tr></table></figure>



<h2 id="12-implement-ReturnType-lt-T-gt"><a href="#12-implement-ReturnType-lt-T-gt" class="headerlink" title="12. implement ReturnType&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/ReturnType">12. implement ReturnType&lt;T&gt;</a></h2><h3 id="题目-11"><a href="#题目-11" class="headerlink" title="题目"></a>题目</h3><p>Similar to <a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/Parameters">Parameters</a>, <code>ReturnType&lt;T&gt;</code>, as the name says itself, returns the return type of function type T.</p>
<p>Please implement <code>MyReturnType&lt;T&gt;</code> by yourself.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Foo = <span class="function">() =&gt;</span> &#123;<span class="attr">a</span>: <span class="built_in">string</span>&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> A = MyReturnType&lt;Foo&gt; <span class="comment">// &#123;a: string&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-11"><a href="#答案-11" class="headerlink" title="答案"></a>答案</h3><p>需要用<code>infers</code>将结果提取出来，后面需要补充三目判断符做兜底</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> MyReturnType&lt;T <span class="keyword">extends</span> (...args: <span class="built_in">any</span>[]) =&gt; <span class="built_in">any</span>&gt; =</span><br><span class="line">T <span class="keyword">extends</span> (...args: <span class="built_in">any</span>[]) =&gt; infer P ? P : <span class="built_in">never</span></span><br><span class="line"><span class="comment">// our type is a function</span></span><br><span class="line"><span class="comment">// we infer the return type</span></span><br></pre></td></tr></table></figure>



<h2 id="13-implement-InstanceType-lt-T-gt"><a href="#13-implement-InstanceType-lt-T-gt" class="headerlink" title="13. implement InstanceType&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/InstanceType">13. implement InstanceType&lt;T&gt;</a></h2><h3 id="题目-12"><a href="#题目-12" class="headerlink" title="题目"></a>题目</h3><p>For a constructor function type T, <code>InstanceType&lt;T&gt;</code> returns the instance type.</p>
<p>Please implement <code>MyInstanceType&lt;T&gt;</code> by yourself.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Foo</span> </span>&#123;&#125;</span><br><span class="line"><span class="keyword">type</span> A = MyInstanceType&lt;<span class="keyword">typeof</span> Foo&gt; <span class="comment">// Foo</span></span><br><span class="line"><span class="keyword">type</span> B = MyInstanceType&lt;<span class="function">() =&gt;</span> <span class="built_in">string</span>&gt; <span class="comment">// Error</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-12"><a href="#答案-12" class="headerlink" title="答案"></a>答案</h3><p>需要用<code>infers</code>将结果提取出来，后面需要补充三目判断符做兜底</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">* same as ReturnType&lt;T&gt; expect T extends constructor function type</span></span><br><span class="line"><span class="comment">*/</span> </span><br><span class="line"><span class="keyword">type</span> MyInstanceType&lt;T <span class="keyword">extends</span> <span class="keyword">new</span> (...args: <span class="built_in">any</span>[]) =&gt; <span class="built_in">any</span>&gt; = </span><br><span class="line">T <span class="keyword">extends</span> <span class="keyword">new</span> (...args: <span class="built_in">any</span>[]) =&gt; infer P ? P : <span class="built_in">never</span></span><br><span class="line"><span class="comment">// return the instanceType</span></span><br><span class="line"><span class="comment">// T extends a constructor function</span></span><br><span class="line"><span class="comment">// and we return the constructor functions type - we infer the return type</span></span><br></pre></td></tr></table></figure>



<h2 id="14-implement-ThisParameterType-lt-T-gt"><a href="#14-implement-ThisParameterType-lt-T-gt" class="headerlink" title="14. implement ThisParameterType&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/ThisParameterType">14. implement ThisParameterType&lt;T&gt;</a></h2><h3 id="题目-13"><a href="#题目-13" class="headerlink" title="题目"></a>题目</h3><p>For a function type T, <code>ThisParameterType&lt;T&gt;</code> extracts the <code>this</code> type. If <code>this</code> is not set, <code>unknown</code> is used.</p>
<p>Please implement <code>MyThisParameterType&lt;T&gt;</code> by yourself.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"><span class="built_in">this</span>: &#123;a: <span class="built_in">string</span>&#125;</span>) </span>&#123;&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Bar</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> A = MyThisParameterType&lt;<span class="keyword">typeof</span> Foo&gt; <span class="comment">// &#123;a: string&#125;</span></span><br><span class="line"><span class="keyword">type</span> B = MyThisParameterType&lt;<span class="keyword">typeof</span> Bar&gt; <span class="comment">// unknown</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-13"><a href="#答案-13" class="headerlink" title="答案"></a>答案</h3><p>需要用<code>infers</code>将第一个输入参数提取出来，后面需要补充三目判断符做兜底</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> MyThisParameterType&lt;T <span class="keyword">extends</span> (...args: <span class="built_in">any</span>[]) =&gt; <span class="built_in">any</span>&gt; = </span><br><span class="line">T <span class="keyword">extends</span> (<span class="built_in">this</span>: infer P, ...args: <span class="built_in">any</span>[]) =&gt; <span class="built_in">any</span> ? P : unknown</span><br></pre></td></tr></table></figure>

<p>Sometimes problem is easier than you thought. The question wants to get the ‘this ‘ parameter type, just return this type.</p>
<h2 id="15-implement-OmitThisParameter-lt-T-gt"><a href="#15-implement-OmitThisParameter-lt-T-gt" class="headerlink" title="15. implement OmitThisParameter&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/OmitThisParameter">15. implement OmitThisParameter&lt;T&gt;</a></h2><h3 id="题目-14"><a href="#题目-14" class="headerlink" title="题目"></a>题目</h3><p>When <code>Function.prototype.bind()</code> is used, the returned function has a bound <code>this</code>. <code>OmitThisParameter&lt;T&gt;</code> could be used to type this.</p>
<p>Please implement <code>MyOmitThisParameter&lt;T&gt;</code> by yourself.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"><span class="built_in">this</span>: &#123;a: <span class="built_in">string</span>&#125;</span>) </span>&#123;&#125;</span><br><span class="line">foo() <span class="comment">// Error</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> bar = foo.bind(&#123;<span class="attr">a</span>: <span class="string">&#x27;BFE.dev&#x27;</span>&#125;)</span><br><span class="line">bar() <span class="comment">// OK</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Foo = <span class="function">(<span class="params"><span class="built_in">this</span>: &#123;a: <span class="built_in">string</span>&#125;</span>) =&gt;</span> <span class="built_in">string</span></span><br><span class="line"><span class="keyword">type</span> Bar = MyOmitThisParameter&lt;Foo&gt; <span class="comment">// () =&gt; string</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-14"><a href="#答案-14" class="headerlink" title="答案"></a>答案</h3><p>需要用<code>infers</code>将第一个输入参数提取出来，后面需要补充三目判断符做兜底</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> MyOmitThisParameter&lt;T <span class="keyword">extends</span> (...args: <span class="built_in">any</span>[]) =&gt; <span class="built_in">any</span>&gt; = </span><br><span class="line">T <span class="keyword">extends</span> (<span class="built_in">this</span>: <span class="built_in">any</span>, ...args: infer P) =&gt; infer Q ? <span class="function">(<span class="params">...args: P</span>) =&gt;</span> Q : unknown</span><br></pre></td></tr></table></figure>



<h2 id="16-implement-FirstChar-lt-T-gt"><a href="#16-implement-FirstChar-lt-T-gt" class="headerlink" title="16. implement FirstChar&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/FirstChar">16. implement FirstChar&lt;T&gt;</a></h2><h3 id="题目-15"><a href="#题目-15" class="headerlink" title="题目"></a>题目</h3><p>Please implement <code>FirstChar&lt;T&gt;</code> to get the first character of a string.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = FirstChar&lt;<span class="string">&#x27;BFE&#x27;</span>&gt; <span class="comment">// &#x27;B&#x27;</span></span><br><span class="line"><span class="keyword">type</span> B = FirstChar&lt;<span class="string">&#x27;dev&#x27;</span>&gt; <span class="comment">// &#x27;d&#x27;</span></span><br><span class="line"><span class="keyword">type</span> C = FirstChar&lt;<span class="string">&#x27;&#x27;</span>&gt; <span class="comment">// never</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-15"><a href="#答案-15" class="headerlink" title="答案"></a>答案</h3><p>需要用<code>infers</code>将参数首字母提取出来，后面需要补充三目判断符做兜底</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> FirstChar&lt;T <span class="keyword">extends</span> <span class="built_in">string</span>&gt; = T <span class="keyword">extends</span> <span class="string">`<span class="subst">$&#123;infer S&#125;</span><span class="subst">$&#123;<span class="built_in">any</span>&#125;</span>`</span> ? S : <span class="built_in">never</span></span><br></pre></td></tr></table></figure>



<h2 id="17-implement-LastChar-lt-T-gt"><a href="#17-implement-LastChar-lt-T-gt" class="headerlink" title="17. implement LastChar&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-LastChar-T">17. implement LastChar&lt;T&gt;</a></h2><h3 id="题目-16"><a href="#题目-16" class="headerlink" title="题目"></a>题目</h3><p>Similar to <a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/FirstChar">FirstChar</a>, please implment <code>LastChar&lt;T&gt;</code> to get the last character.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = LastChar&lt;<span class="string">&#x27;BFE&#x27;</span>&gt; <span class="comment">// &#x27;E&#x27;</span></span><br><span class="line"><span class="keyword">type</span> B = LastChar&lt;<span class="string">&#x27;dev&#x27;</span>&gt; <span class="comment">// &#x27;v&#x27;</span></span><br><span class="line"><span class="keyword">type</span> C = LastChar&lt;<span class="string">&#x27;&#x27;</span>&gt; <span class="comment">// never</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-16"><a href="#答案-16" class="headerlink" title="答案"></a>答案</h3><p>需要用<code>infers</code>将参数首字母提取出来，后面需要补充三目判断符做兜底，递归调用至最后一个字母</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> LastChar&lt;T <span class="keyword">extends</span> <span class="built_in">string</span>&gt; = T <span class="keyword">extends</span> <span class="string">`<span class="subst">$&#123;infer P&#125;</span><span class="subst">$&#123;infer S&#125;</span>`</span> ? (S <span class="keyword">extends</span> <span class="string">&#x27;&#x27;</span> ? P : LastChar&lt;S&gt;) : <span class="built_in">never</span></span><br></pre></td></tr></table></figure>



<h2 id="18-implement-TupleToUnion-lt-T-gt"><a href="#18-implement-TupleToUnion-lt-T-gt" class="headerlink" title="18. implement TupleToUnion&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-TupleToUnion-T">18. implement TupleToUnion&lt;T&gt;</a></h2><h3 id="题目-17"><a href="#题目-17" class="headerlink" title="题目"></a>题目</h3><p>Given a tuple type, implement <code>TupleToUnion&lt;T&gt;</code> to get a union type from it.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Foo = [<span class="built_in">string</span>, <span class="built_in">number</span>, <span class="built_in">boolean</span>]</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Bar = TupleToUnion&lt;Foo&gt; <span class="comment">// string | number | boolean</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-17"><a href="#答案-17" class="headerlink" title="答案"></a>答案</h3><p>需要用数字索引将数组每一个参数提取出来</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> TupleToUnion&lt;T <span class="keyword">extends</span> <span class="built_in">any</span>[]&gt; = T[<span class="built_in">number</span>]</span><br></pre></td></tr></table></figure>

<p>也可以利用数组递归调用，后面需要补充三目判断符做兜底</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> TupleToUnion&lt;T <span class="keyword">extends</span> <span class="built_in">any</span>[]&gt; = T <span class="keyword">extends</span> [</span><br><span class="line">  first: infer F,</span><br><span class="line">  ...rest: infer R</span><br><span class="line">] ?</span><br><span class="line">  F | TupleToUnion&lt;R&gt;</span><br><span class="line">  :</span><br><span class="line">  <span class="built_in">never</span></span><br></pre></td></tr></table></figure>



<h2 id="19-implement-FirstItem-lt-T-gt"><a href="#19-implement-FirstItem-lt-T-gt" class="headerlink" title="19. implement FirstItem&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-FirstItem-T">19. implement FirstItem&lt;T&gt;</a></h2><h3 id="题目-18"><a href="#题目-18" class="headerlink" title="题目"></a>题目</h3><p>Similar to <a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/FirstChar">16. FirstChar</a>, please implement <code>FirstItem&lt;T&gt;</code> to obtain first item of a tuple type.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = FirstItem&lt;[<span class="built_in">string</span>, <span class="built_in">number</span>, <span class="built_in">boolean</span>]&gt; <span class="comment">// string</span></span><br><span class="line"><span class="keyword">type</span> B = FirstItem&lt;[<span class="string">&#x27;B&#x27;</span>, <span class="string">&#x27;F&#x27;</span>, <span class="string">&#x27;E&#x27;</span>]&gt; <span class="comment">// &#x27;B&#x27;</span></span><br></pre></td></tr></table></figure>

<h4 id="答案-18"><a href="#答案-18" class="headerlink" title="答案"></a>答案</h4><p>需要用数字索引将数组第一个参数提取出来，后面需要补充三目判断符做兜底</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> FirstItem&lt;T <span class="keyword">extends</span> <span class="built_in">any</span>[]&gt; = T[<span class="number">0</span>] <span class="keyword">extends</span> <span class="literal">undefined</span> ? <span class="built_in">never</span> : T[<span class="number">0</span>]</span><br></pre></td></tr></table></figure>



<h2 id="20-implement-IsNever-lt-T-gt"><a href="#20-implement-IsNever-lt-T-gt" class="headerlink" title="20. implement IsNever&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/20-IsNever-T">20. implement IsNever&lt;T&gt;</a></h2><h3 id="题目-19"><a href="#题目-19" class="headerlink" title="题目"></a>题目</h3><p>Please implement a utility type <code>IsNever&lt;T&gt;</code> which returns true if T is never and false otherwise.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = IsNever&lt;<span class="built_in">never</span>&gt; <span class="comment">// true</span></span><br><span class="line"><span class="keyword">type</span> B = IsNever&lt;<span class="built_in">string</span>&gt; <span class="comment">// false</span></span><br><span class="line"><span class="keyword">type</span> C = IsNever&lt;<span class="literal">undefined</span>&gt; <span class="comment">// false</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-19"><a href="#答案-19" class="headerlink" title="答案"></a>答案</h3><p>需要用将数组never提取出来进行判断，因为没有类型extends never</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> IsNever&lt;T&gt; = [T] <span class="keyword">extends</span> [<span class="built_in">never</span>] ? <span class="literal">true</span> : <span class="literal">false</span></span><br></pre></td></tr></table></figure>



<h2 id="21-implement-LastItem-lt-T-gt"><a href="#21-implement-LastItem-lt-T-gt" class="headerlink" title="21. implement LastItem&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-LastItem-T">21. implement LastItem&lt;T&gt;</a></h2><h3 id="题目-20"><a href="#题目-20" class="headerlink" title="题目"></a>题目</h3><p>Similar to <a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-FirstItem-T">19. FirstItem</a>, please implement <code>LastItem&lt;T&gt;</code> to obtain last item of a tuple type.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = LastItem&lt;[<span class="built_in">string</span>, <span class="built_in">number</span>, <span class="built_in">boolean</span>]&gt; <span class="comment">// boolean</span></span><br><span class="line"><span class="keyword">type</span> B = LastItem&lt;[<span class="string">&#x27;B&#x27;</span>, <span class="string">&#x27;F&#x27;</span>, <span class="string">&#x27;E&#x27;</span>]&gt; <span class="comment">// &#x27;E&#x27;</span></span><br><span class="line"><span class="keyword">type</span> C = LastItem&lt;[]&gt; <span class="comment">// never</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-20"><a href="#答案-20" class="headerlink" title="答案"></a>答案</h3><p>需要用将数组最后一个参数提取出来，后面需要补充三目判断符做兜底</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> LastItem&lt;T <span class="keyword">extends</span> <span class="built_in">any</span>[]&gt; = T <span class="keyword">extends</span> [...any[], infer P] ? P : <span class="built_in">never</span></span><br></pre></td></tr></table></figure>



<h2 id="22-implement-StringToTuple-lt-T-gt"><a href="#22-implement-StringToTuple-lt-T-gt" class="headerlink" title="22. implement StringToTuple&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-StringToTuple-T">22. implement StringToTuple&lt;T&gt;</a></h2><h3 id="题目-21"><a href="#题目-21" class="headerlink" title="题目"></a>题目</h3><p>Given a string literal type, please implement <code>StringToTuple&lt;T&gt;</code> to genrate a tuple type by spreading each characters.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = StringToTuple&lt;<span class="string">&#x27;BFE.dev&#x27;</span>&gt; <span class="comment">// [&#x27;B&#x27;, &#x27;F&#x27;, &#x27;E&#x27;, &#x27;.&#x27;, &#x27;d&#x27;, &#x27;e&#x27;,&#x27;v&#x27;]</span></span><br><span class="line"><span class="keyword">type</span> B = StringToTuple&lt;<span class="string">&#x27;&#x27;</span>&gt; <span class="comment">// []</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-21"><a href="#答案-21" class="headerlink" title="答案"></a>答案</h3><p>需要用将字符串第一个字母提取出来然后递归调用转化为数组，后面需要补充三目判断符做兜底</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> StringToTuple&lt;T <span class="keyword">extends</span> <span class="built_in">string</span>&gt; = </span><br><span class="line">T <span class="keyword">extends</span> <span class="string">`<span class="subst">$&#123;infer P&#125;</span><span class="subst">$&#123;infer R&#125;</span>`</span></span><br><span class="line">? [P, ...StringToTuple&lt;R&gt;]</span><br><span class="line">: []</span><br></pre></td></tr></table></figure>



<h2 id="23-implement-LengthOfTuple-lt-T-gt"><a href="#23-implement-LengthOfTuple-lt-T-gt" class="headerlink" title="23. implement LengthOfTuple&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-LengthOfTuple-T">23. implement LengthOfTuple&lt;T&gt;</a></h2><h3 id="题目-22"><a href="#题目-22" class="headerlink" title="题目"></a>题目</h3><p>Here is an easy problem, please implement <code>LengthOfTuple&lt;T&gt;</code> to return the length of tuple.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = LengthOfTuple&lt;[<span class="string">&#x27;B&#x27;</span>, <span class="string">&#x27;F&#x27;</span>, <span class="string">&#x27;E&#x27;</span>]&gt; <span class="comment">// 3</span></span><br><span class="line"><span class="keyword">type</span> B = LengthOfTuple&lt;[]&gt; <span class="comment">// 0</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-22"><a href="#答案-22" class="headerlink" title="答案"></a>答案</h3><p>需要用T[‘length’]方法求得数组长度</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> LengthOfTuple&lt;T <span class="keyword">extends</span> <span class="built_in">any</span>[]&gt; = T[<span class="string">&#x27;length&#x27;</span>]</span><br></pre></td></tr></table></figure>



<h2 id="24-implement-LengthOfString-lt-T-gt"><a href="#24-implement-LengthOfString-lt-T-gt" class="headerlink" title="24. implement LengthOfString&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-LengthOfString-T">24. implement LengthOfString&lt;T&gt;</a></h2><h3 id="题目-23"><a href="#题目-23" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>LengthOfString&lt;T&gt;</code> to return the length of a string.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = LengthOfString&lt;<span class="string">&#x27;BFE.dev&#x27;</span>&gt; <span class="comment">// 7</span></span><br><span class="line"><span class="keyword">type</span> B = LengthOfString&lt;<span class="string">&#x27;&#x27;</span>&gt; <span class="comment">// 0</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-23"><a href="#答案-23" class="headerlink" title="答案"></a>答案</h3><p>结合字符串转数组和计算数组长度计算字符串长度</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> StringToTuple&lt;T <span class="keyword">extends</span> <span class="built_in">string</span>&gt; = </span><br><span class="line">T <span class="keyword">extends</span> <span class="string">`<span class="subst">$&#123;infer P&#125;</span><span class="subst">$&#123;infer R&#125;</span>`</span></span><br><span class="line">? [P, ...StringToTuple&lt;R&gt;]</span><br><span class="line">: []</span><br><span class="line"><span class="keyword">type</span> LengthOfString&lt;T <span class="keyword">extends</span> <span class="built_in">string</span>&gt; = StringToTuple&lt;T&gt;[<span class="string">&#x27;length&#x27;</span>] <span class="comment">// your code here</span></span><br></pre></td></tr></table></figure>



<h2 id="25-implement-UnwrapPromise-lt-T-gt"><a href="#25-implement-UnwrapPromise-lt-T-gt" class="headerlink" title="25. implement UnwrapPromise&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-UnwrapPromise-T">25. implement UnwrapPromise&lt;T&gt;</a></h2><h3 id="题目-24"><a href="#题目-24" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>UnwrapPromise&lt;T&gt;</code> to return the resolved type of a promise.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = UnwrapPromise&lt;<span class="built_in">Promise</span>&lt;<span class="built_in">string</span>&gt;&gt; <span class="comment">// string</span></span><br><span class="line"><span class="keyword">type</span> B = UnwrapPromise&lt;<span class="built_in">Promise</span>&lt;<span class="literal">null</span>&gt;&gt; <span class="comment">// null</span></span><br><span class="line"><span class="keyword">type</span> C = UnwrapPromise&lt;<span class="literal">null</span>&gt; <span class="comment">// Error</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-24"><a href="#答案-24" class="headerlink" title="答案"></a>答案</h3><p>结合字符串转数组和计算数组长度计算字符串长度</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> UnwrapPromise&lt;T&gt; = T <span class="keyword">extends</span> <span class="built_in">Promise</span>&lt;infer U&gt; ? U : <span class="built_in">never</span></span><br></pre></td></tr></table></figure>



<h2 id="26-implement-ReverseTuple-lt-T-gt"><a href="#26-implement-ReverseTuple-lt-T-gt" class="headerlink" title="26. implement ReverseTuple&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-ReverseTuple-T">26. implement ReverseTuple&lt;T&gt;</a></h2><h3 id="题目-25"><a href="#题目-25" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>ReverseTuple&lt;T&gt;</code> to reverse a tuple type.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = ReverseTuple&lt;[<span class="built_in">string</span>, <span class="built_in">number</span>, <span class="built_in">boolean</span>]&gt; <span class="comment">// [boolean, number, string]</span></span><br><span class="line"><span class="keyword">type</span> B = ReverseTuple&lt;[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]&gt; <span class="comment">// [3,2,1]</span></span><br><span class="line"><span class="keyword">type</span> C = ReverseTuple&lt;[]&gt; <span class="comment">// []</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-25"><a href="#答案-25" class="headerlink" title="答案"></a>答案</h3><p>递反转原先的数组</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> ReverseTuple&lt;T <span class="keyword">extends</span> <span class="built_in">any</span>[]&gt; = </span><br><span class="line">T <span class="keyword">extends</span> [...infer L, infer R] ? [R, ...ReverseTuple&lt;L&gt;] : [];</span><br></pre></td></tr></table></figure>



<h2 id="27-implement-Flat-lt-T-gt"><a href="#27-implement-Flat-lt-T-gt" class="headerlink" title="27. implement Flat&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Flat-T">27. implement Flat&lt;T&gt;</a></h2><h3 id="题目-26"><a href="#题目-26" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>Flat&lt;T&gt;</code> to flatten a tuple type.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = Flat&lt;[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]&gt; <span class="comment">// [1,2,3]</span></span><br><span class="line"><span class="keyword">type</span> B = Flat&lt;[<span class="number">1</span>,[<span class="number">2</span>,<span class="number">3</span>], [<span class="number">4</span>,[<span class="number">5</span>,[<span class="number">6</span>]]]]&gt; <span class="comment">// [1,2,3,4,5,6]</span></span><br><span class="line"><span class="keyword">type</span> C = Flat&lt;[]&gt; <span class="comment">// []</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-26"><a href="#答案-26" class="headerlink" title="答案"></a>答案</h3><p>从左到右依次递归展开</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Flat&lt;T <span class="keyword">extends</span> <span class="built_in">any</span>[]&gt; = </span><br><span class="line">T <span class="keyword">extends</span> [infer L, ...infer R] ? (L <span class="keyword">extends</span> <span class="built_in">any</span>[] ? [...Flat&lt;L&gt;, ...Flat&lt;R&gt;] : [L, ...Flat&lt;R&gt;]) : [];</span><br></pre></td></tr></table></figure>



<h2 id="28-implement-IsEmptyType-lt-T-gt"><a href="#28-implement-IsEmptyType-lt-T-gt" class="headerlink" title="28. implement IsEmptyType&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-IsEmptyType-T">28. implement IsEmptyType&lt;T&gt;</a></h2><h3 id="题目-27"><a href="#题目-27" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>IsEmptyType&lt;T&gt;</code> to check if T is empty type <code>&#123;&#125;</code>.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = IsEmptyType&lt;<span class="built_in">string</span>&gt; <span class="comment">// false</span></span><br><span class="line"><span class="keyword">type</span> B = IsEmptyType&lt;&#123;<span class="attr">a</span>: <span class="number">3</span>&#125;&gt; <span class="comment">// false</span></span><br><span class="line"><span class="keyword">type</span> C = IsEmptyType&lt;&#123;&#125;&gt; <span class="comment">// true</span></span><br><span class="line"><span class="keyword">type</span> D = IsEmptyType&lt;<span class="built_in">any</span>&gt; <span class="comment">// false</span></span><br><span class="line"><span class="keyword">type</span> E = IsEmptyType&lt;<span class="built_in">object</span>&gt; <span class="comment">// false</span></span><br><span class="line"><span class="keyword">type</span> F = IsEmptyType&lt;<span class="built_in">Object</span>&gt; <span class="comment">// false</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-27"><a href="#答案-27" class="headerlink" title="答案"></a>答案</h3><p>确认是对象且没有键返回true，否则为false</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> IsEmptyType&lt;T&gt; = <span class="built_in">number</span> <span class="keyword">extends</span> T</span><br><span class="line">? keyof T <span class="keyword">extends</span> <span class="built_in">never</span></span><br><span class="line">  ? <span class="literal">true</span></span><br><span class="line">  : <span class="literal">false</span></span><br><span class="line">: <span class="literal">false</span></span><br></pre></td></tr></table></figure>



<h2 id="29-implement-Shift-lt-T-gt"><a href="#29-implement-Shift-lt-T-gt" class="headerlink" title="29. implement Shift&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Shift-T">29. implement Shift&lt;T&gt;</a></h2><h3 id="题目-28"><a href="#题目-28" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>Shift&lt;T&gt;</code> to shift the first item of a tuple type.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = Shift&lt;[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]&gt; <span class="comment">// [2,3]</span></span><br><span class="line"><span class="keyword">type</span> B = Shift&lt;[<span class="number">1</span>]&gt; <span class="comment">// []</span></span><br><span class="line"><span class="keyword">type</span> C = Shift&lt;[]&gt; <span class="comment">// []</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-28"><a href="#答案-28" class="headerlink" title="答案"></a>答案</h3><p>把数组第一个元素删去，后面需要补充三目判断符做兜底</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Shift&lt;T <span class="keyword">extends</span> <span class="built_in">any</span>[]&gt; = T <span class="keyword">extends</span> [<span class="built_in">any</span>, ...infer R] ? [...R] : []</span><br></pre></td></tr></table></figure>



<h2 id="30-implement-IsAny-lt-T-gt"><a href="#30-implement-IsAny-lt-T-gt" class="headerlink" title="30. implement IsAny&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-IsAny-T">30. implement IsAny&lt;T&gt;</a></h2><h3 id="题目-29"><a href="#题目-29" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>IsAny&lt;T&gt;</code> to check against <code>any</code>.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = IsAny&lt;<span class="built_in">string</span>&gt; <span class="comment">// false</span></span><br><span class="line"><span class="keyword">type</span> B = IsAny&lt;<span class="built_in">any</span>&gt; <span class="comment">// true</span></span><br><span class="line"><span class="keyword">type</span> C = IsAny&lt;unknown&gt; <span class="comment">// false</span></span><br><span class="line"><span class="keyword">type</span> D = IsAny&lt;<span class="built_in">never</span>&gt; <span class="comment">// false</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-29"><a href="#答案-29" class="headerlink" title="答案"></a>答案</h3><p>利用T &amp; any = any的性质且任意类型extends any的性质判断</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> IsAny&lt;T&gt; = <span class="literal">false</span> <span class="keyword">extends</span> <span class="literal">true</span> &amp; T ? <span class="literal">true</span> : <span class="literal">false</span></span><br></pre></td></tr></table></figure>



<h2 id="31-implement-Push-lt-T-I-gt"><a href="#31-implement-Push-lt-T-I-gt" class="headerlink" title="31. implement Push&lt;T, I&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Push-T-I">31. implement Push&lt;T, I&gt;</a></h2><h3 id="题目-30"><a href="#题目-30" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>Push&lt;T, I&gt;</code> to return a new type by pushing new type into tuple type.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = Push&lt;[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>], <span class="number">4</span>&gt; <span class="comment">// [2,3]</span></span><br><span class="line"><span class="keyword">type</span> B = Push&lt;[<span class="number">1</span>], <span class="number">2</span>&gt; <span class="comment">// [1, 2]</span></span><br><span class="line"><span class="keyword">type</span> C = Push&lt;[], <span class="built_in">string</span>&gt; <span class="comment">// [string]</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-30"><a href="#答案-30" class="headerlink" title="答案"></a>答案</h3><p>拼接数组与新的类型</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Push&lt;T <span class="keyword">extends</span> <span class="built_in">any</span>[], I&gt; = T <span class="keyword">extends</span> [...infer P] ? [...P, I] : [I]</span><br></pre></td></tr></table></figure>

<p>或者直接用展开运算符</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Push&lt;T <span class="keyword">extends</span> <span class="built_in">any</span>[], I&gt; = [...T, I]</span><br></pre></td></tr></table></figure>



<h2 id="32-implement-RepeatString-lt-T-C-gt"><a href="#32-implement-RepeatString-lt-T-C-gt" class="headerlink" title="32. implement RepeatString&lt;T, C&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-RepeatString-string-number">32. implement RepeatString&lt;T, C&gt;</a></h2><h3 id="题目-31"><a href="#题目-31" class="headerlink" title="题目"></a>题目</h3><p>Similar to <code>String.prototype.repeat()</code>, implement <code>RepeatString&lt;T, C&gt;</code> to create a new type by repeating string <code>T</code> for <code>C</code> times.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = RepeatString&lt;<span class="string">&#x27;a&#x27;</span>, <span class="number">3</span>&gt; <span class="comment">// &#x27;aaa&#x27;</span></span><br><span class="line"><span class="keyword">type</span> B = RepeatString&lt;<span class="string">&#x27;a&#x27;</span>, <span class="number">0</span>&gt; <span class="comment">// &#x27;&#x27;</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-31"><a href="#答案-31" class="headerlink" title="答案"></a>答案</h3><p>递归减少C，增加A的长度</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> RepeatString&lt;</span><br><span class="line">  T <span class="keyword">extends</span> <span class="built_in">string</span>,</span><br><span class="line">  C <span class="keyword">extends</span> <span class="built_in">number</span>,</span><br><span class="line">  A <span class="keyword">extends</span> <span class="built_in">string</span>[] = [T]</span><br><span class="line">&gt; = C <span class="keyword">extends</span> <span class="number">0</span> ? <span class="string">&#x27;&#x27;</span> : (A[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> C ? T : <span class="string">`<span class="subst">$&#123;T&#125;</span><span class="subst">$&#123;RepeatString&lt;T, C, [...A, T]&gt;&#125;</span>`</span>)</span><br></pre></td></tr></table></figure>



<h2 id="33-implement-TupleToString-lt-T-gt"><a href="#33-implement-TupleToString-lt-T-gt" class="headerlink" title="33. implement TupleToString&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-TupleToString-T">33. implement TupleToString&lt;T&gt;</a></h2><h3 id="题目-32"><a href="#题目-32" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>TupleToString&lt;T&gt;</code> to return a new type by concatenating all the string to a new string type.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = TupleToString&lt;[<span class="string">&#x27;a&#x27;</span>]&gt; <span class="comment">// &#x27;a&#x27;</span></span><br><span class="line"><span class="keyword">type</span> B = TupleToString&lt;[<span class="string">&#x27;B&#x27;</span>, <span class="string">&#x27;F&#x27;</span>, <span class="string">&#x27;E&#x27;</span>]&gt; <span class="comment">// &#x27;BFE&#x27;</span></span><br><span class="line"><span class="keyword">type</span> C = TupleToString&lt;[]&gt; <span class="comment">// &#x27;&#x27;</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-32"><a href="#答案-32" class="headerlink" title="答案"></a>答案</h3><p>拼接字符串，直到剩下的数组长度为0</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> TupleToString&lt;T <span class="keyword">extends</span> <span class="built_in">string</span>[]&gt; = </span><br><span class="line">  T <span class="keyword">extends</span> [infer P, ...infer U] ? </span><br><span class="line">    (U <span class="keyword">extends</span> <span class="built_in">string</span>[] ?</span><br><span class="line">      <span class="string">`<span class="subst">$&#123;P &amp; <span class="built_in">string</span>&#125;</span><span class="subst">$&#123;TupleToString&lt;U&gt;&#125;</span>`</span>:</span><br><span class="line">      P</span><br><span class="line">    )</span><br><span class="line">  : </span><br><span class="line">  <span class="string">&#x27;&#x27;</span></span><br></pre></td></tr></table></figure>



<h2 id="34-implement-Repeat-lt-T-C-gt"><a href="#34-implement-Repeat-lt-T-C-gt" class="headerlink" title="34. implement Repeat&lt;T, C&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Repeat-T-C">34. implement Repeat&lt;T, C&gt;</a></h2><h3 id="题目-33"><a href="#题目-33" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>Repeat&lt;T, C&gt;</code> to return a tuple by repeating.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = Repeat&lt;<span class="built_in">number</span>, <span class="number">3</span>&gt; <span class="comment">// [number, number, number]</span></span><br><span class="line"><span class="keyword">type</span> B = Repeat&lt;<span class="built_in">string</span>, <span class="number">2</span>&gt; <span class="comment">// [string, string]</span></span><br><span class="line"><span class="keyword">type</span> C = Repeat&lt;<span class="number">1</span>, <span class="number">1</span>&gt; <span class="comment">// [1, 1]</span></span><br><span class="line"><span class="keyword">type</span> D = Repeat&lt;<span class="number">0</span>, <span class="number">0</span>&gt; <span class="comment">// []</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-33"><a href="#答案-33" class="headerlink" title="答案"></a>答案</h3><blockquote>
<p>negative case of C could be ignored.</p>
</blockquote>
<p>拼接字符串，直到字符串数组长度为等于设置的C</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Repeat&lt;T, C <span class="keyword">extends</span> <span class="built_in">number</span>, A <span class="keyword">extends</span> T[] = []&gt; = </span><br><span class="line">A[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> C ? A : Repeat&lt;T, C, [...A, T]&gt;</span><br></pre></td></tr></table></figure>



<h2 id="35-implement-Filter-lt-T-A-gt"><a href="#35-implement-Filter-lt-T-A-gt" class="headerlink" title="35. implement Filter&lt;T, A&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Filter-T-A">35. implement Filter&lt;T, A&gt;</a></h2><h3 id="题目-34"><a href="#题目-34" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>Filter&lt;T, A&gt;</code> to return a new tuple type by filtering all the types from T that are assignable to A.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = Filter&lt;[<span class="number">1</span>,<span class="string">&#x27;BFE&#x27;</span>, <span class="number">2</span>, <span class="literal">true</span>, <span class="string">&#x27;dev&#x27;</span>], <span class="built_in">number</span>&gt; <span class="comment">// [1, 2]</span></span><br><span class="line"><span class="keyword">type</span> B = Filter&lt;[<span class="number">1</span>,<span class="string">&#x27;BFE&#x27;</span>, <span class="number">2</span>, <span class="literal">true</span>, <span class="string">&#x27;dev&#x27;</span>], <span class="built_in">string</span>&gt; <span class="comment">// [&#x27;BFE&#x27;, &#x27;dev&#x27;]</span></span><br><span class="line"><span class="keyword">type</span> C = Filter&lt;[<span class="number">1</span>,<span class="string">&#x27;BFE&#x27;</span>, <span class="number">2</span>, <span class="built_in">any</span>, <span class="string">&#x27;dev&#x27;</span>], <span class="built_in">string</span>&gt; <span class="comment">// [&#x27;BFE&#x27;, any, &#x27;dev&#x27;]</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-34"><a href="#答案-34" class="headerlink" title="答案"></a>答案</h3><p>把每项展开，如果符合条件加入结果数组中</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Filter&lt;T <span class="keyword">extends</span> <span class="built_in">any</span>[], A&gt; = T <span class="keyword">extends</span> [infer L, ...infer R]</span><br><span class="line">  ? ([L] <span class="keyword">extends</span> [A]</span><br><span class="line">    ? [L, ...Filter&lt;R, A&gt;]</span><br><span class="line">    : Filter&lt;R, A&gt;</span><br><span class="line">    )</span><br><span class="line">  : []</span><br></pre></td></tr></table></figure>



<h2 id="36-implement-LargerThan-lt-A-B-gt"><a href="#36-implement-LargerThan-lt-A-B-gt" class="headerlink" title="36. implement LargerThan&lt;A, B&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-LargerThan-A-B">36. implement LargerThan&lt;A, B&gt;</a></h2><h3 id="题目-35"><a href="#题目-35" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>LargerThan&lt;A, B&gt;</code> to compare two positive integers.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = LargerThan&lt;<span class="number">0</span>, <span class="number">1</span>&gt; <span class="comment">// false</span></span><br><span class="line"><span class="keyword">type</span> B = LargerThan&lt;<span class="number">1</span>, <span class="number">0</span>&gt; <span class="comment">// true</span></span><br><span class="line"><span class="keyword">type</span> C = LargerThan&lt;<span class="number">10</span>, <span class="number">9</span>&gt; <span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-35"><a href="#答案-35" class="headerlink" title="答案"></a>答案</h3><p>把每项展开，如果符合条件加入结果数组中，利用数组长度进行判断</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> LargerThan&lt;A <span class="keyword">extends</span> <span class="built_in">number</span>, B <span class="keyword">extends</span> <span class="built_in">number</span>, S <span class="keyword">extends</span> <span class="built_in">number</span>[] = []&gt; = </span><br><span class="line">S[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> A</span><br><span class="line">? <span class="literal">false</span></span><br><span class="line">: (S[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> B</span><br><span class="line">  ? <span class="literal">true</span> </span><br><span class="line">  :</span><br><span class="line">  LargerThan&lt;A, B, [...S, A]&gt;</span><br><span class="line">  )</span><br><span class="line">  <span class="comment">// Keep pushing the Array until it reaches one of the number</span></span><br><span class="line">  <span class="comment">// the first number being reached is the smaller one</span></span><br></pre></td></tr></table></figure>

<p>如果考虑小数和负数是怎么写的？这样写！</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> NSymbol = <span class="number">0</span> | <span class="number">1</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="built_in">enum</span> Res &#123;</span><br><span class="line">  Victory,</span><br><span class="line">  Failure,</span><br><span class="line">  Tie</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> NumberObject&lt;S <span class="keyword">extends</span> NSymbol, I <span class="keyword">extends</span> string[], F <span class="keyword">extends</span> string[]&gt; &#123;</span><br><span class="line">  symbol: S</span><br><span class="line">  integer: I</span><br><span class="line">  fractional: F</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> IsNegative&lt;T <span class="keyword">extends</span> <span class="built_in">number</span>&gt; = <span class="string">`<span class="subst">$&#123;T&#125;</span>`</span> <span class="keyword">extends</span> <span class="string">`-<span class="subst">$&#123;<span class="built_in">string</span>&#125;</span>`</span> ? <span class="literal">true</span> : <span class="literal">false</span></span><br><span class="line"><span class="keyword">type</span> IsFractional&lt;T <span class="keyword">extends</span> <span class="built_in">number</span>&gt; = <span class="string">`<span class="subst">$&#123;T&#125;</span>`</span> <span class="keyword">extends</span> <span class="string">`<span class="subst">$&#123;<span class="built_in">string</span>&#125;</span>.<span class="subst">$&#123;<span class="built_in">string</span>&#125;</span>`</span> ? <span class="literal">true</span> : <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Split&lt;T <span class="keyword">extends</span> <span class="built_in">string</span>, P <span class="keyword">extends</span> <span class="built_in">string</span>[] = []&gt; = </span><br><span class="line">  T <span class="keyword">extends</span> <span class="string">&#x27;&#x27;</span></span><br><span class="line">    ? P</span><br><span class="line">    : T <span class="keyword">extends</span> <span class="string">`<span class="subst">$&#123;infer F&#125;</span><span class="subst">$&#123;infer R&#125;</span>`</span> </span><br><span class="line">      ? Split&lt;R, [...P, F]&gt;</span><br><span class="line">      : <span class="built_in">never</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> NumberObjectByNF&lt;T <span class="keyword">extends</span> <span class="built_in">number</span>&gt; = </span><br><span class="line">  <span class="string">`<span class="subst">$&#123;T&#125;</span>`</span> <span class="keyword">extends</span> <span class="string">`<span class="subst">$&#123;infer _&#125;</span><span class="subst">$&#123;infer I&#125;</span>.<span class="subst">$&#123;infer F&#125;</span>`</span></span><br><span class="line">    ? NumberObject&lt;<span class="number">1</span>, Split&lt;I&gt;, Split&lt;F&gt;&gt;</span><br><span class="line">    : <span class="built_in">never</span></span><br><span class="line"><span class="keyword">type</span> NumberObjectByPF&lt;T <span class="keyword">extends</span> <span class="built_in">number</span>&gt; = </span><br><span class="line">  <span class="string">`<span class="subst">$&#123;T&#125;</span>`</span> <span class="keyword">extends</span> <span class="string">`<span class="subst">$&#123;infer I&#125;</span>.<span class="subst">$&#123;infer F&#125;</span>`</span></span><br><span class="line">    ? NumberObject&lt;<span class="number">0</span>, Split&lt;I&gt;, Split&lt;F&gt;&gt;</span><br><span class="line">    : <span class="built_in">never</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> NumberObjectByN&lt;T <span class="keyword">extends</span> <span class="built_in">number</span>&gt; =</span><br><span class="line">  <span class="string">`<span class="subst">$&#123;T&#125;</span>`</span> <span class="keyword">extends</span> <span class="string">`<span class="subst">$&#123;infer _&#125;</span><span class="subst">$&#123;infer I&#125;</span>`</span></span><br><span class="line">    ? NumberObject&lt;<span class="number">1</span>, Split&lt;I&gt;, []&gt;</span><br><span class="line">    : <span class="built_in">never</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> NumberObjectByP&lt;T <span class="keyword">extends</span> <span class="built_in">number</span>&gt; = NumberObject&lt;<span class="number">0</span>, Split&lt;<span class="string">`<span class="subst">$&#123;T&#125;</span>`</span>&gt;, []&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> CreateNumberObject&lt;T <span class="keyword">extends</span> <span class="built_in">number</span>, N = IsNegative&lt;T&gt;, F = IsFractional&lt;T&gt;&gt; = </span><br><span class="line">  N <span class="keyword">extends</span> <span class="literal">true</span> </span><br><span class="line">    ? F <span class="keyword">extends</span> <span class="literal">true</span></span><br><span class="line">      ? NumberObjectByNF&lt;T&gt;</span><br><span class="line">      : NumberObjectByN&lt;T&gt;</span><br><span class="line">    : F <span class="keyword">extends</span> <span class="literal">true</span></span><br><span class="line">      ? NumberObjectByPF&lt;T&gt;</span><br><span class="line">      : NumberObjectByP&lt;T&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> NumberCompare&lt;A <span class="keyword">extends</span> <span class="built_in">string</span>, B <span class="keyword">extends</span> <span class="built_in">string</span>, T <span class="keyword">extends</span> <span class="built_in">string</span>[] = [], L = <span class="string">`<span class="subst">$&#123;T[<span class="string">&#x27;length&#x27;</span>]&#125;</span>`</span>&gt; = </span><br><span class="line">  L <span class="keyword">extends</span> A</span><br><span class="line">    ? L <span class="keyword">extends</span> B</span><br><span class="line">      ? Res.Tie</span><br><span class="line">      : Res.Failure</span><br><span class="line">    : L <span class="keyword">extends</span> B</span><br><span class="line">      ? Res.Victory</span><br><span class="line">      : NumberCompare&lt;A, B, [...T, <span class="string">&#x27;_&#x27;</span>]&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Pop&lt;T <span class="keyword">extends</span> <span class="built_in">string</span>[]&gt; = T[<span class="number">0</span>]</span><br><span class="line"><span class="keyword">type</span> Shift&lt;T <span class="keyword">extends</span> <span class="built_in">string</span>[]&gt; = T <span class="keyword">extends</span> [infer _, ...infer R] ? R : <span class="built_in">never</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> IsStringArray&lt;T <span class="keyword">extends</span> unknown&gt; = </span><br><span class="line">  T <span class="keyword">extends</span> <span class="built_in">Array</span>&lt;infer I&gt; ? </span><br><span class="line">    I <span class="keyword">extends</span> <span class="built_in">string</span> </span><br><span class="line">      ? T </span><br><span class="line">      : <span class="built_in">never</span> </span><br><span class="line">    : <span class="built_in">never</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> NumberArrayCompareHandler&lt;A <span class="keyword">extends</span> <span class="built_in">string</span>[], B <span class="keyword">extends</span> <span class="built_in">string</span>[]&gt; = </span><br><span class="line">  A[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> <span class="number">0</span></span><br><span class="line">    ? B[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> <span class="number">0</span></span><br><span class="line">      ? Res.Tie</span><br><span class="line">      : Res.Failure</span><br><span class="line">    : NumberCompare&lt;Pop&lt;A&gt;, Pop&lt;B&gt;&gt; <span class="keyword">extends</span> Res.Tie</span><br><span class="line">      ? NumberArrayCompareHandler&lt;IsStringArray&lt;Shift&lt;A&gt;&gt;, IsStringArray&lt;Shift&lt;B&gt;&gt;&gt;</span><br><span class="line">      : NumberCompare&lt;Pop&lt;A&gt;, Pop&lt;B&gt;&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> SymbolCompareResMap = &#123;</span><br><span class="line">  <span class="string">&#x27;00&#x27;</span>: Res.Tie,</span><br><span class="line">  <span class="string">&#x27;11&#x27;</span>: Res.Tie,</span><br><span class="line">  <span class="string">&#x27;01&#x27;</span>: Res.Victory,</span><br><span class="line">  <span class="string">&#x27;10&#x27;</span>: Res.Failure</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> SymbolCompare&lt;A <span class="keyword">extends</span> <span class="number">0</span> | <span class="number">1</span>, B <span class="keyword">extends</span> <span class="number">0</span> | <span class="number">1</span>&gt; = SymbolCompareResMap[<span class="string">`<span class="subst">$&#123;A&#125;</span><span class="subst">$&#123;B&#125;</span>`</span>]</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> NumberArrayCompare&lt;A <span class="keyword">extends</span> <span class="built_in">string</span>[], B <span class="keyword">extends</span> <span class="built_in">string</span>[], CL <span class="keyword">extends</span> <span class="built_in">boolean</span>, LR = NumberCompare&lt;<span class="string">`<span class="subst">$&#123;A[<span class="string">&#x27;length&#x27;</span>]&#125;</span>`</span>, <span class="string">`<span class="subst">$&#123;B[<span class="string">&#x27;length&#x27;</span>]&#125;</span>`</span>&gt;&gt; = </span><br><span class="line">  CL <span class="keyword">extends</span> <span class="literal">true</span></span><br><span class="line">    ? LR <span class="keyword">extends</span> Res.Tie</span><br><span class="line">      ? NumberArrayCompareHandler&lt;A, B&gt;</span><br><span class="line">      : LR</span><br><span class="line">    : NumberArrayCompareHandler&lt;A, B&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> LargerThan&lt;</span><br><span class="line">    A <span class="keyword">extends</span> <span class="built_in">number</span>, </span><br><span class="line">    B <span class="keyword">extends</span> <span class="built_in">number</span>, </span><br><span class="line">    AO <span class="keyword">extends</span> NumberObject&lt;NSymbol, [], []&gt; = CreateNumberObject&lt;A&gt;, </span><br><span class="line">    BO <span class="keyword">extends</span> NumberObject&lt;NSymbol, [], []&gt; = CreateNumberObject&lt;B&gt;,</span><br><span class="line">    S =  SymbolCompare&lt;AO[<span class="string">&#x27;symbol&#x27;</span>], BO[<span class="string">&#x27;symbol&#x27;</span>]&gt;,</span><br><span class="line">    I = NumberArrayCompare&lt;AO[<span class="string">&#x27;integer&#x27;</span>], BO[<span class="string">&#x27;integer&#x27;</span>], <span class="literal">true</span>&gt;,</span><br><span class="line">    F = NumberArrayCompare&lt;AO[<span class="string">&#x27;fractional&#x27;</span>], BO[<span class="string">&#x27;fractional&#x27;</span>], <span class="literal">false</span>&gt;</span><br><span class="line">  &gt; = </span><br><span class="line">    S <span class="keyword">extends</span> Res.Failure ? <span class="literal">false</span> :</span><br><span class="line">    S <span class="keyword">extends</span> Res.Victory ? <span class="literal">true</span> :</span><br><span class="line">      AO[<span class="string">&#x27;symbol&#x27;</span>] <span class="keyword">extends</span> <span class="number">1</span></span><br><span class="line">        ? I <span class="keyword">extends</span> Res.Failure ? <span class="literal">true</span> :</span><br><span class="line">          I <span class="keyword">extends</span> Res.Victory ? <span class="literal">false</span> :</span><br><span class="line">          F <span class="keyword">extends</span> Res.Failure ? <span class="literal">true</span> :</span><br><span class="line">          <span class="literal">false</span></span><br><span class="line">        : I <span class="keyword">extends</span> Res.Failure ? <span class="literal">false</span> :</span><br><span class="line">          I <span class="keyword">extends</span> Res.Victory ? <span class="literal">true</span> :</span><br><span class="line">          F <span class="keyword">extends</span> Res.Victory ? <span class="literal">true</span> :</span><br><span class="line">          <span class="literal">false</span></span><br></pre></td></tr></table></figure>



<h2 id="37-implement-SmallerThan-lt-A-B-gt"><a href="#37-implement-SmallerThan-lt-A-B-gt" class="headerlink" title="37. implement SmallerThan&lt;A, B&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-SmallerThan-A-B">37. implement SmallerThan&lt;A, B&gt;</a></h2><h3 id="题目-36"><a href="#题目-36" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>SmallerThan&lt;A, B&gt;</code> to compare two positive integers.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = SmallerThan&lt;<span class="number">0</span>, <span class="number">1</span>&gt; <span class="comment">// true</span></span><br><span class="line"><span class="keyword">type</span> B = SmallerThan&lt;<span class="number">1</span>, <span class="number">0</span>&gt; <span class="comment">// false</span></span><br><span class="line"><span class="keyword">type</span> C = SmallerThan&lt;<span class="number">10</span>, <span class="number">9</span>&gt; <span class="comment">// false</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-36"><a href="#答案-36" class="headerlink" title="答案"></a>答案</h3><p>把每项展开，如果符合条件加入结果数组中，利用数组长度进行判断</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> SmallerThan&lt;A <span class="keyword">extends</span> <span class="built_in">number</span>, B <span class="keyword">extends</span> <span class="built_in">number</span>, S <span class="keyword">extends</span> <span class="built_in">number</span>[] = []&gt; = </span><br><span class="line">S[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> B</span><br><span class="line">? <span class="literal">false</span></span><br><span class="line">: (S[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> A</span><br><span class="line">  ? <span class="literal">true</span> </span><br><span class="line">  :</span><br><span class="line">  SmallerThan&lt;A, B, [...S, A]&gt;</span><br><span class="line">  )</span><br></pre></td></tr></table></figure>



<h2 id="38-implement-Add-lt-A-B-gt"><a href="#38-implement-Add-lt-A-B-gt" class="headerlink" title="38. implement Add&lt;A, B&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Add-A-B">38. implement Add&lt;A, B&gt;</a></h2><h3 id="题目-37"><a href="#题目-37" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>Add&lt;A, B&gt;</code> to get the sum of two positive integers.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = Add&lt;<span class="number">1</span>, <span class="number">2</span>&gt; <span class="comment">// 3</span></span><br><span class="line"><span class="keyword">type</span> B = Add&lt;<span class="number">0</span>, <span class="number">0</span>&gt; <span class="comment">// 0</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-37"><a href="#答案-37" class="headerlink" title="答案"></a>答案</h3><p>用两个数组分别记录2个数对应的长度，利用数组长度相加的结果</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Add&lt;A <span class="keyword">extends</span> <span class="built_in">number</span>, B <span class="keyword">extends</span> <span class="built_in">number</span>, C <span class="keyword">extends</span> <span class="built_in">any</span>[] = [], D <span class="keyword">extends</span> <span class="built_in">any</span>[] = []&gt; = </span><br><span class="line">C[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> A</span><br><span class="line">? (</span><br><span class="line">    D[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> B</span><br><span class="line">    ? [...C, ...D][<span class="string">&#x27;length&#x27;</span>]</span><br><span class="line">    : Add&lt;A, B, C, [...D, B]&gt;</span><br><span class="line">  )</span><br><span class="line">: Add&lt;A, B, [...C, A], D&gt;</span><br></pre></td></tr></table></figure>



<h2 id="39-implement-ToNumber-lt-T-gt"><a href="#39-implement-ToNumber-lt-T-gt" class="headerlink" title="39. implement ToNumber&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-ToNumber-T">39. implement ToNumber&lt;T&gt;</a></h2><h3 id="题目-38"><a href="#题目-38" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>ToNumber&lt;T&gt;</code> to get an integer number type from integer string.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = ToNumber&lt;<span class="string">&#x27;1&#x27;</span>&gt; <span class="comment">// 1</span></span><br><span class="line"><span class="keyword">type</span> B = ToNumber&lt;<span class="string">&#x27;40&#x27;</span>&gt; <span class="comment">// 40</span></span><br><span class="line"><span class="keyword">type</span> C = ToNumber&lt;<span class="string">&#x27;0&#x27;</span>&gt; <span class="comment">// 0</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-38"><a href="#答案-38" class="headerlink" title="答案"></a>答案</h3><blockquote>
<p>we can just consider smaller numbers</p>
</blockquote>
<p>用数组分别记长度，然后利用模板引擎转化为字符串</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> ToNumber&lt;</span><br><span class="line">  T <span class="keyword">extends</span> <span class="built_in">string</span>,</span><br><span class="line">  A <span class="keyword">extends</span> <span class="built_in">number</span>[] = []</span><br><span class="line">&gt; = <span class="string">`<span class="subst">$&#123;A[<span class="string">&#x27;length&#x27;</span>]&#125;</span>`</span> <span class="keyword">extends</span> T ? A[<span class="string">&#x27;length&#x27;</span>] : ToNumber&lt;T, [<span class="number">1</span>, ...A]&gt;;</span><br></pre></td></tr></table></figure>



<h2 id="40-implement-UnionToIntersection-lt-T-gt"><a href="#40-implement-UnionToIntersection-lt-T-gt" class="headerlink" title="40. implement UnionToIntersection&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-UnionToTuple-T">40. implement UnionToIntersection&lt;T&gt;</a></h2><h3 id="题目-39"><a href="#题目-39" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>UnionToIntersection&lt;T&gt;</code> to get an Intersection type from Union type.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = UnionToIntersection&lt;&#123;<span class="attr">a</span>: <span class="built_in">string</span>&#125; | &#123;<span class="attr">b</span>: <span class="built_in">string</span>&#125; | &#123;<span class="attr">c</span>: <span class="built_in">string</span>&#125;&gt; </span><br><span class="line"><span class="comment">// &#123;a: string&#125; &amp; &#123;b: string&#125; &amp; &#123;c: string&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-39"><a href="#答案-39" class="headerlink" title="答案"></a>答案</h3><p>The article : <a target="_blank" rel="noopener" href="https://fettblog.eu/typescript-union-to-intersection/">TypeScript: Union to intersection </a> <a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/526988538">https://zhuanlan.zhihu.com/p/526988538</a></p>
<p>After reading about the contra-variance thing, I finally understand why casting <code>T</code> to function works. Great explanation, huge kudos to the author 🎉</p>
<p>利用函数的输入参数将T中的|转化为&amp;</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> UnionToIntersection&lt;T&gt; = </span><br><span class="line">(T <span class="keyword">extends</span> <span class="built_in">any</span> ? <span class="function">(<span class="params">args: T</span>) =&gt;</span> <span class="built_in">void</span> : <span class="built_in">never</span>) <span class="keyword">extends</span> (<span class="function">(<span class="params">args: infer R</span>) =&gt;</span> <span class="built_in">void</span>) ? R : <span class="built_in">never</span>;</span><br></pre></td></tr></table></figure>



<h2 id="41-implement-FindIndex-lt-T-E-gt"><a href="#41-implement-FindIndex-lt-T-E-gt" class="headerlink" title="41. implement FindIndex&lt;T, E&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/Search">41. implement FindIndex&lt;T, E&gt;</a></h2><h3 id="题目-40"><a href="#题目-40" class="headerlink" title="题目"></a>题目</h3><p>Just like <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex">Array.prototype.findIndex()</a>, please implement <code>FindIndex&lt;T, E&gt;</code>.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = [<span class="built_in">any</span>, <span class="built_in">never</span>, <span class="number">1</span>, <span class="string">&#x27;2&#x27;</span>, <span class="literal">true</span>]</span><br><span class="line"><span class="keyword">type</span> B = FindIndex&lt;A, <span class="number">1</span>&gt; <span class="comment">// 2</span></span><br><span class="line"><span class="keyword">type</span> C = FindIndex&lt;A, <span class="number">3</span>&gt; <span class="comment">// never</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-40"><a href="#答案-40" class="headerlink" title="答案"></a>答案</h3><p>首先判断2个元素是否相同，再通过数组第一个元素是否相同递归查找有无相同元素，通过一个辅助数组长度来计算个数</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Equal&lt;A, B&gt; = </span><br><span class="line">  (&lt;T&gt;<span class="function">() =&gt;</span> T <span class="keyword">extends</span> A ? <span class="number">1</span> : <span class="number">2</span>) <span class="keyword">extends</span> (&lt;T&gt;<span class="function">() =&gt;</span> T <span class="keyword">extends</span> B ? <span class="number">1</span> : <span class="number">2</span>)</span><br><span class="line">  ? <span class="literal">true</span></span><br><span class="line">  : <span class="literal">false</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*倒叙查找，有问题，如果有重复的，得到的index不是第一个出现的index*/</span></span><br><span class="line"><span class="comment">// type FindIndex&lt;T extends any[], K&gt; = T extends [...infer left, infer last] ? Equal&lt;K, last&gt; extends true ? left[&quot;length&quot;] : FindIndex&lt;left, K&gt; : never</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*顺序查找*/</span></span><br><span class="line"><span class="keyword">type</span> FindIndex&lt;T <span class="keyword">extends</span> <span class="built_in">any</span>[], E, A <span class="keyword">extends</span> <span class="built_in">any</span>[] = []&gt; = T <span class="keyword">extends</span> [</span><br><span class="line">  infer F,</span><br><span class="line">  ...infer R</span><br><span class="line">]</span><br><span class="line">  ? (Equal&lt;F, E&gt; <span class="keyword">extends</span> <span class="literal">true</span></span><br><span class="line">    ? A[<span class="string">&#x27;length&#x27;</span>]</span><br><span class="line">    : FindIndex&lt;R, E, [...A, F]&gt;)</span><br><span class="line">  : <span class="built_in">never</span>;</span><br></pre></td></tr></table></figure>



<h2 id="42-implement-Equal-lt-A-B-gt"><a href="#42-implement-Equal-lt-A-B-gt" class="headerlink" title="42. implement Equal&lt;A, B&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/Euqual-A-B">42. implement Equal&lt;A, B&gt;</a></h2><h3 id="题目-41"><a href="#题目-41" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>Equal&lt;A, B&gt;</code> to check if two types are identical.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">Equal&lt;<span class="built_in">any</span>, <span class="built_in">any</span>&gt; <span class="comment">// true</span></span><br><span class="line">Equal&lt;<span class="built_in">any</span>, <span class="number">1</span>&gt; <span class="comment">// false</span></span><br><span class="line">Equal&lt;<span class="built_in">never</span>, <span class="built_in">never</span>&gt; <span class="comment">// true</span></span><br><span class="line">Equal&lt;<span class="string">&#x27;BFE&#x27;</span>, <span class="string">&#x27;BFE&#x27;</span>&gt; <span class="comment">// true</span></span><br><span class="line">Equal&lt;<span class="string">&#x27;BFE&#x27;</span>, <span class="built_in">string</span>&gt; <span class="comment">// false</span></span><br><span class="line">Equal&lt;<span class="number">1</span> | <span class="number">2</span>, <span class="number">2</span> | <span class="number">1</span>&gt; <span class="comment">// true</span></span><br><span class="line">Equal&lt;&#123;<span class="attr">a</span> : <span class="built_in">number</span>&#125;, &#123;<span class="attr">a</span>: <span class="built_in">number</span>&#125;&gt; <span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-41"><a href="#答案-41" class="headerlink" title="答案"></a>答案</h3><blockquote>
<p>there might not be a 100% perfect solution, so are the test cases from us.</p>
</blockquote>
<blockquote>
<p>let’s all try with our best effort.</p>
</blockquote>
<p>其实上一题就需要这种判断方法了</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Equal&lt;A, B&gt; = </span><br><span class="line">  (&lt;T&gt;<span class="function">() =&gt;</span> T <span class="keyword">extends</span> A ? <span class="number">1</span> : <span class="number">2</span>) <span class="keyword">extends</span> (&lt;T&gt;<span class="function">() =&gt;</span> T <span class="keyword">extends</span> B ? <span class="number">1</span> : <span class="number">2</span>)</span><br><span class="line">  ? <span class="literal">true</span></span><br><span class="line">  : <span class="literal">false</span></span><br></pre></td></tr></table></figure>



<h2 id="43-implement-Trim-lt-T-gt"><a href="#43-implement-Trim-lt-T-gt" class="headerlink" title="43. implement Trim&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/Trim">43. implement Trim&lt;T&gt;</a></h2><h3 id="题目-42"><a href="#题目-42" class="headerlink" title="题目"></a>题目</h3><p>Please implement <code>Trim&lt;T&gt;</code> just like <code>String.prototype.trim()</code>.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = Trim&lt;<span class="string">&#x27;    BFE.dev&#x27;</span>&gt; <span class="comment">// &#x27;BFE&#x27;</span></span><br><span class="line"><span class="keyword">type</span> B = Trim&lt;<span class="string">&#x27; BFE. dev  &#x27;</span>&gt; <span class="comment">// &#x27;BFE. dev&#x27;</span></span><br><span class="line"><span class="keyword">type</span> C = Trim&lt;<span class="string">&#x27;  BFE .   dev  &#x27;</span>&gt; <span class="comment">// &#x27;BFE .   dev&#x27;</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-42"><a href="#答案-42" class="headerlink" title="答案"></a>答案</h3><p>用递归的方法先去除左边的空格，再去除右边的空格</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//extends 如果T包含的类型 是 U包含的类型的 &#x27;子集&#x27;，那么取结果X，否则取结果Y。</span></span><br><span class="line"><span class="comment">// infer X 就相当于声明了一个变量，这个变量随后可以使用，有点像for循环里面的声明语句</span></span><br><span class="line"><span class="keyword">type</span> Trim&lt;T <span class="keyword">extends</span> <span class="built_in">string</span>&gt; = T <span class="keyword">extends</span> <span class="string">` <span class="subst">$&#123;infer R&#125;</span>`</span></span><br><span class="line">? Trim&lt;R&gt;</span><br><span class="line">: (T <span class="keyword">extends</span> <span class="string">`<span class="subst">$&#123;infer L&#125;</span> `</span></span><br><span class="line">  ? Trim&lt;L&gt;</span><br><span class="line">  : T</span><br><span class="line">  )</span><br><span class="line"></span><br><span class="line"><span class="comment">// 参考链接</span></span><br><span class="line"><span class="comment">// https://juejin.cn/post/6844904146877808653</span></span><br><span class="line"><span class="comment">// https://zhuanlan.zhihu.com/p/133249506</span></span><br></pre></td></tr></table></figure>



<h2 id="44-implement-ReplaceAll-lt-S-F-T-gt"><a href="#44-implement-ReplaceAll-lt-S-F-T-gt" class="headerlink" title="44. implement ReplaceAll&lt;S, F, T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/Replace">44. implement ReplaceAll&lt;S, F, T&gt;</a></h2><h3 id="题目-43"><a href="#题目-43" class="headerlink" title="题目"></a>题目</h3><p>Just like <code>String.prototype.replaceAll()</code>,</p>
<p>please implement <code>ReplaceAll&lt;S, F, T&gt;</code>.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = ReplaceAll&lt;<span class="string">&#x27;aba&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;&#x27;</span>&gt; <span class="comment">// &#x27;aa&#x27;</span></span><br><span class="line"><span class="keyword">type</span> B = ReplaceAll&lt;<span class="string">&#x27;ababbab&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;&#x27;</span>&gt; <span class="comment">// &#x27;aaa&#x27;</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-43"><a href="#答案-43" class="headerlink" title="答案"></a>答案</h3><p>1、前、中、后分别取一下infer。 2、 判断F不为空</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> ReplaceAll&lt;</span><br><span class="line">  S <span class="keyword">extends</span> <span class="built_in">string</span>, </span><br><span class="line">  F <span class="keyword">extends</span> <span class="built_in">string</span>, </span><br><span class="line">  T <span class="keyword">extends</span> <span class="built_in">string</span></span><br><span class="line">  &gt; = F <span class="keyword">extends</span> <span class="string">&quot;&quot;</span> ? S : </span><br><span class="line">  (S <span class="keyword">extends</span> <span class="string">`<span class="subst">$&#123;F&#125;</span><span class="subst">$&#123;infer R&#125;</span>`</span> ? <span class="string">`<span class="subst">$&#123;T&#125;</span><span class="subst">$&#123;ReplaceAll&lt;R, F, T&gt;&#125;</span>`</span> : </span><br><span class="line">    (S <span class="keyword">extends</span> <span class="string">`<span class="subst">$&#123;infer A&#125;</span><span class="subst">$&#123;F&#125;</span><span class="subst">$&#123;infer B&#125;</span>`</span> ? <span class="string">`<span class="subst">$&#123;A&#125;</span><span class="subst">$&#123;T&#125;</span><span class="subst">$&#123;ReplaceAll&lt;B, F, T&gt;&#125;</span>`</span> : </span><br><span class="line">      S <span class="keyword">extends</span> <span class="string">`<span class="subst">$&#123;infer A&#125;</span><span class="subst">$&#123;F&#125;</span>`</span> ? <span class="string">`<span class="subst">$&#123;ReplaceAll&lt;A, F, T&gt;&#125;</span><span class="subst">$&#123;T&#125;</span>`</span> : S</span><br><span class="line">    )</span><br><span class="line">  )</span><br></pre></td></tr></table></figure>



<h2 id="45-implement-Slice-lt-A-S-E-gt"><a href="#45-implement-Slice-lt-A-S-E-gt" class="headerlink" title="45. implement Slice&lt;A, S, E&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/Slice">45. implement Slice&lt;A, S, E&gt;</a></h2><h3 id="题目-44"><a href="#题目-44" class="headerlink" title="题目"></a>题目</h3><p>Just like what <code>Array.prototype.slice()</code> does, please implement Slice&lt;A, S, E&gt;.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = Slice&lt;[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>], <span class="number">0</span>, <span class="number">2</span>&gt; <span class="comment">// [1, 2]</span></span><br><span class="line"><span class="keyword">type</span> B = Slice&lt;[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>], <span class="number">2</span>&gt; <span class="comment">// [3, 4]</span></span><br><span class="line"><span class="keyword">type</span> C = Slice&lt;[<span class="built_in">number</span>, <span class="built_in">boolean</span>, bigint], <span class="number">2</span>, <span class="number">5</span>&gt; <span class="comment">// [bigint]</span></span><br><span class="line"><span class="keyword">type</span> D = Slice&lt;[<span class="built_in">string</span>, <span class="built_in">boolean</span>], <span class="number">0</span>, <span class="number">1</span>&gt; <span class="comment">// [string]</span></span><br><span class="line"><span class="keyword">type</span> E = Slice&lt;[<span class="built_in">number</span>, <span class="built_in">boolean</span>, bigint], <span class="number">5</span>, <span class="number">6</span>&gt; <span class="comment">// []</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>Let’s assume end index <code>E</code> won’t be negative</p>
</blockquote>
<h3 id="答案-44"><a href="#答案-44" class="headerlink" title="答案"></a>答案</h3><p>采用了每次比较大小的方式，到20时候就爆zhan了， 想到了优化方式：先转化成数组，然后根据数组infer出来</p>
<p><a target="_blank" rel="noopener" href="https://typescript.easy-pp.com/modules.html">https://typescript.easy-pp.com/modules.html</a></p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> LessThan&lt;A <span class="keyword">extends</span> <span class="built_in">number</span>, B <span class="keyword">extends</span> <span class="built_in">number</span>, S <span class="keyword">extends</span> <span class="built_in">any</span>[] = []&gt; =</span><br><span class="line">  S[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> B</span><br><span class="line">  ? <span class="literal">false</span></span><br><span class="line">  : S[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> A</span><br><span class="line">    ? <span class="literal">true</span></span><br><span class="line">    : LessThan&lt;A, B, [...S, <span class="string">&#x27;&#x27;</span>]&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Slice&lt;</span><br><span class="line">  A <span class="keyword">extends</span> <span class="built_in">any</span>[], <span class="comment">// Array</span></span><br><span class="line">  S <span class="keyword">extends</span> <span class="built_in">number</span> = <span class="number">0</span>, <span class="comment">// start</span></span><br><span class="line">  E <span class="keyword">extends</span> <span class="built_in">number</span> = A[<span class="string">&#x27;length&#x27;</span>], <span class="comment">// end</span></span><br><span class="line">  I <span class="keyword">extends</span> <span class="built_in">any</span>[] = [], <span class="comment">// current index</span></span><br><span class="line">  O <span class="keyword">extends</span> <span class="built_in">any</span>[] = [] <span class="comment">// output array</span></span><br><span class="line">  &gt; =</span><br><span class="line">  A <span class="keyword">extends</span> [infer F, ...infer R]</span><br><span class="line">  ? LessThan&lt;I[<span class="string">&#x27;length&#x27;</span>], S&gt; <span class="keyword">extends</span> <span class="literal">false</span> <span class="comment">// index &gt;= start</span></span><br><span class="line">    ? LessThan&lt;I[<span class="string">&#x27;length&#x27;</span>], E&gt; <span class="keyword">extends</span> <span class="literal">true</span> <span class="comment">// index &lt; end</span></span><br><span class="line">      ? Slice&lt;R, S, E, [...I, <span class="string">&#x27;&#x27;</span>], [...O, F]&gt;</span><br><span class="line">      : O <span class="comment">// index &gt;= start &amp;&amp; index &gt;= end =&gt; index &gt;= end =&gt; return</span></span><br><span class="line">    : Slice&lt;R, S, E, [...I, <span class="string">&#x27;&#x27;</span>], O&gt; <span class="comment">// index &lt; start</span></span><br><span class="line">  : O <span class="comment">// A == []</span></span><br></pre></td></tr></table></figure>



<h2 id="46-implement-Subtract-lt-A-B-gt"><a href="#46-implement-Subtract-lt-A-B-gt" class="headerlink" title="46. implement Subtract&lt;A, B&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/Subtract-A-B">46. implement Subtract&lt;A, B&gt;</a></h2><h3 id="题目-45"><a href="#题目-45" class="headerlink" title="题目"></a>题目</h3><p>Similar to <a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Add-A-B">38. implement Add</a>, please implement <code>Subtract&lt;A, B&gt;</code>.</p>
<ol>
<li>only need to consider positive integers</li>
<li>B is guaranteed to be smaller or equal to A</li>
</ol>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = Subtract&lt;<span class="number">1</span>, <span class="number">1</span>&gt; <span class="comment">// 0</span></span><br><span class="line"><span class="keyword">type</span> B = Subtract&lt;<span class="number">10</span>, <span class="number">3</span>&gt; <span class="comment">// 7</span></span><br><span class="line"><span class="keyword">type</span> C = Subtract&lt;<span class="number">3</span>, <span class="number">10</span>&gt; <span class="comment">// never</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-45"><a href="#答案-45" class="headerlink" title="答案"></a>答案</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> LessThan&lt;A <span class="keyword">extends</span> <span class="built_in">number</span>, B <span class="keyword">extends</span> <span class="built_in">number</span>, S <span class="keyword">extends</span> <span class="built_in">any</span>[] = []&gt; =</span><br><span class="line">  S[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> B</span><br><span class="line">  ? <span class="literal">false</span></span><br><span class="line">  : S[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> A</span><br><span class="line">    ? <span class="literal">true</span></span><br><span class="line">    : LessThan&lt;A, B, [...S, <span class="string">&#x27;&#x27;</span>]&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Subtract&lt;A <span class="keyword">extends</span> <span class="built_in">number</span>, B <span class="keyword">extends</span> <span class="built_in">number</span>, I <span class="keyword">extends</span> <span class="built_in">any</span>[] = [], O <span class="keyword">extends</span> <span class="built_in">any</span>[] = []&gt; =</span><br><span class="line">LessThan&lt;A, B&gt; <span class="keyword">extends</span> <span class="literal">true</span></span><br><span class="line">? <span class="built_in">never</span></span><br><span class="line">: LessThan&lt;I[<span class="string">&#x27;length&#x27;</span>], A&gt; <span class="keyword">extends</span> <span class="literal">true</span> <span class="comment">// i &lt; a</span></span><br><span class="line">  ? Subtract&lt;</span><br><span class="line">    A,</span><br><span class="line">    B,</span><br><span class="line">    [...I, <span class="string">&#x27;&#x27;</span>], <span class="comment">// i++</span></span><br><span class="line">      LessThan&lt;I[<span class="string">&#x27;length&#x27;</span>], B&gt; <span class="keyword">extends</span> <span class="literal">true</span> ? O : [...O, <span class="string">&#x27;&#x27;</span>] <span class="comment">// !(i &lt; b) =&gt; o++</span></span><br><span class="line">  &gt;</span><br><span class="line">  : O[<span class="string">&#x27;length&#x27;</span>] <span class="comment">// return o</span></span><br></pre></td></tr></table></figure>



<h2 id="47-implement-Multiply-lt-A-B-gt"><a href="#47-implement-Multiply-lt-A-B-gt" class="headerlink" title="47. implement Multiply&lt;A, B&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/Subtract-A-B">47. implement Multiply&lt;A, B&gt;</a></h2><h3 id="题目-46"><a href="#题目-46" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>Multiply&lt;A, B&gt;</code></p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = Multiply&lt;<span class="number">1</span>, <span class="number">0</span>&gt; <span class="comment">// 0</span></span><br><span class="line"><span class="keyword">type</span> B = Multiply&lt;<span class="number">4</span>, <span class="number">6</span>&gt; <span class="comment">// 24</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>Only need to consider non-negative integers.</p>
</blockquote>
<h3 id="答案-46"><a href="#答案-46" class="headerlink" title="答案"></a>答案</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> RepeatAny &lt;B <span class="keyword">extends</span> <span class="built_in">number</span> , C <span class="keyword">extends</span> <span class="built_in">any</span>[] = []&gt; =</span><br><span class="line">C[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> B</span><br><span class="line">  ? C</span><br><span class="line">  : RepeatAny&lt;B, [...C, <span class="built_in">any</span>]&gt;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Multiply&lt;A <span class="keyword">extends</span> <span class="built_in">number</span>, B <span class="keyword">extends</span> <span class="built_in">number</span>, L <span class="keyword">extends</span> <span class="built_in">any</span>[] = [], Sum <span class="keyword">extends</span> <span class="built_in">any</span>[] = []&gt; =</span><br><span class="line">L[<span class="string">&quot;length&quot;</span>] <span class="keyword">extends</span> A </span><br><span class="line">?</span><br><span class="line">  Sum[<span class="string">&quot;length&quot;</span>]</span><br><span class="line">: </span><br><span class="line">  Multiply&lt;A, B, [...L, <span class="built_in">any</span>], [...Sum, ...RepeatAny&lt;B&gt;]&gt;;</span><br></pre></td></tr></table></figure>



<h2 id="48-implement-Divide-lt-A-B-gt"><a href="#48-implement-Divide-lt-A-B-gt" class="headerlink" title="48. implement Divide&lt;A, B&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/Divide-A-B">48. implement Divide&lt;A, B&gt;</a></h2><h3 id="题目-47"><a href="#题目-47" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>Divide&lt;A, B&gt;</code></p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = Divide&lt;<span class="number">1</span>, <span class="number">0</span>&gt; <span class="comment">// never</span></span><br><span class="line"><span class="keyword">type</span> B = Divide&lt;<span class="number">4</span>, <span class="number">2</span>&gt; <span class="comment">// 2</span></span><br><span class="line"><span class="keyword">type</span> C = Divide&lt;<span class="number">10</span>, <span class="number">3</span>&gt; <span class="comment">// 3</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>Only need to consider non-negative integers.</p>
</blockquote>
<h3 id="答案-47"><a href="#答案-47" class="headerlink" title="答案"></a>答案</h3><p>通过减法实现除法</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Tuple&lt;T <span class="keyword">extends</span> <span class="built_in">number</span>, U <span class="keyword">extends</span> <span class="built_in">any</span>[] = []&gt; =</span><br><span class="line">  U[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> T ? U : Tuple&lt;T, [...U, <span class="built_in">any</span>]&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Subtract&lt;</span><br><span class="line">  A <span class="keyword">extends</span> <span class="built_in">number</span>,</span><br><span class="line">  B <span class="keyword">extends</span> <span class="built_in">number</span></span><br><span class="line">&gt; =</span><br><span class="line">  Tuple&lt;A&gt; <span class="keyword">extends</span> [...Tuple&lt;B&gt;, ...infer R] ? R[<span class="string">&#x27;length&#x27;</span>] : <span class="built_in">never</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> SmallerThan&lt;</span><br><span class="line">  A <span class="keyword">extends</span> <span class="built_in">number</span>,</span><br><span class="line">  B <span class="keyword">extends</span> <span class="built_in">number</span>,</span><br><span class="line">  S <span class="keyword">extends</span> <span class="built_in">number</span>[] = []</span><br><span class="line">&gt; = S[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> B</span><br><span class="line">  ? <span class="literal">false</span></span><br><span class="line">  : S[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> A</span><br><span class="line">  ? <span class="literal">true</span></span><br><span class="line">  : SmallerThan&lt;A, B, [A, ...S]&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Divide&lt;A <span class="keyword">extends</span> <span class="built_in">number</span>, B <span class="keyword">extends</span> <span class="built_in">number</span>, S <span class="keyword">extends</span> <span class="built_in">number</span>[] = []&gt; = </span><br><span class="line">  B <span class="keyword">extends</span> <span class="number">0</span></span><br><span class="line">    ? <span class="built_in">never</span></span><br><span class="line">    : SmallerThan&lt;A,B&gt; <span class="keyword">extends</span> <span class="literal">true</span></span><br><span class="line">      ? S[<span class="string">&#x27;length&#x27;</span>]</span><br><span class="line">      : Divide&lt;Subtract&lt;A, B&gt;, B, [...S, <span class="built_in">any</span>]&gt;;</span><br></pre></td></tr></table></figure>



<h2 id="49-asserts-never"><a href="#49-asserts-never" class="headerlink" title="49. asserts never"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/asserts-never">49. asserts never</a></h2><h3 id="题目-48"><a href="#题目-48" class="headerlink" title="题目"></a>题目</h3><p>In <code>switch</code>, it is easy for us to miss out some cases.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Value = <span class="string">&#x27;a&#x27;</span> | <span class="string">&#x27;b&#x27;</span> | <span class="string">&#x27;c&#x27;</span>;</span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">let</span> value: Value</span><br><span class="line"></span><br><span class="line"><span class="keyword">switch</span> (value) &#123;</span><br><span class="line">  <span class="keyword">case</span> <span class="string">&#x27;a&#x27;</span>:</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="string">&#x27;b&#x27;</span>:</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">default</span>:</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>We missed out case <code>&#39;c&#39;</code> in above code and compiler doesn’t compain.</p>
<p>Plase create function <code>assertsNever()</code> to check for exhaustiveness.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Value = <span class="string">&#x27;a&#x27;</span> | <span class="string">&#x27;b&#x27;</span> | <span class="string">&#x27;c&#x27;</span>;</span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">let</span> value: Value</span><br><span class="line"></span><br><span class="line"><span class="keyword">switch</span> (value) &#123;</span><br><span class="line">  <span class="keyword">case</span> <span class="string">&#x27;a&#x27;</span>:</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="string">&#x27;b&#x27;</span>:</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">default</span>:</span><br><span class="line">    assertsNever(value)</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>Now TypeScript would complaint the missing case <code>&#39;c&#39;</code>.</p>
<h3 id="答案-48"><a href="#答案-48" class="headerlink" title="答案"></a>答案</h3><p>断言函数输入</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">declare</span> <span class="keyword">const</span> assertsNever: <span class="function">(<span class="params">arg: <span class="built_in">never</span></span>) =&gt;</span> <span class="built_in">void</span>;</span><br></pre></td></tr></table></figure>

<p>或者</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">assertsNever</span> (<span class="params">arg: <span class="built_in">never</span></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">TypeError</span>(<span class="string">`Missing case <span class="subst">$&#123;arg&#125;</span>`</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>



<h2 id="50-implement-Sort-lt-T-gt"><a href="#50-implement-Sort-lt-T-gt" class="headerlink" title="50. implement Sort&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/sort">50. implement Sort&lt;T&gt;</a></h2><h3 id="题目-49"><a href="#题目-49" class="headerlink" title="题目"></a>题目</h3><p>You are able to compare two non-negative integers in <a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-LargerThan-A-B">LargerThan</a> and <a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-SmallerThan-A-B">SmallerThan</a>, then you should be able to implement <code>Sort&lt;T&gt;</code> in ascending order.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = Sort&lt;[<span class="number">100</span>, <span class="number">9</span>, <span class="number">20</span>, <span class="number">0</span>, <span class="number">0</span> <span class="number">55</span>]&gt;</span><br><span class="line"><span class="comment">// [0, 0, 9, 55, 100]</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-49"><a href="#答案-49" class="headerlink" title="答案"></a>答案</h3><p>选择排序</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> LessThan&lt;A, B, T <span class="keyword">extends</span> <span class="built_in">any</span>[] = []&gt; = </span><br><span class="line">T[<span class="string">&quot;length&quot;</span>] <span class="keyword">extends</span> B</span><br><span class="line">  ? <span class="literal">false</span></span><br><span class="line">  : T[<span class="string">&quot;length&quot;</span>] <span class="keyword">extends</span> A</span><br><span class="line">    ? <span class="literal">true</span></span><br><span class="line">    :  LessThan&lt;A, B, [...T, <span class="built_in">any</span>]&gt;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Smallest&lt;T <span class="keyword">extends</span> <span class="built_in">any</span>[], S <span class="keyword">extends</span> <span class="built_in">any</span> = T[<span class="number">0</span>]&gt; =</span><br><span class="line">T <span class="keyword">extends</span> [infer A,...infer R]</span><br><span class="line">  ? ( LessThan&lt;A, S&gt; <span class="keyword">extends</span> <span class="literal">true</span></span><br><span class="line">    ? Smallest&lt;R, A&gt;</span><br><span class="line">    : Smallest&lt;R, S&gt;</span><br><span class="line">  )</span><br><span class="line">  : S;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> RemoveFirstOccurence&lt;T <span class="keyword">extends</span> <span class="built_in">any</span> [], N <span class="keyword">extends</span> <span class="built_in">any</span>, R <span class="keyword">extends</span> <span class="built_in">any</span>[] = []&gt; =</span><br><span class="line">T <span class="keyword">extends</span> [infer A, ...infer Rest]</span><br><span class="line">  ? (A <span class="keyword">extends</span> N</span><br><span class="line">    ? [...R, ...Rest]</span><br><span class="line">    : RemoveFirstOccurence&lt;Rest, N, [...R, A]&gt;) </span><br><span class="line">  : R;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Sort&lt;T <span class="keyword">extends</span> <span class="built_in">any</span>[], Sorted <span class="keyword">extends</span> <span class="built_in">any</span>[] = []&gt; =</span><br><span class="line">T <span class="keyword">extends</span> [infer A, ...infer B]</span><br><span class="line">  ? (</span><br><span class="line">    Sort&lt;RemoveFirstOccurence&lt;T, Smallest&lt;[A, ...B]&gt;&gt;, [...Sorted, Smallest&lt;[A, ...B]&gt;]&gt;</span><br><span class="line">  )</span><br><span class="line">  : Sorted;</span><br></pre></td></tr></table></figure>

<p>或者</p>
<p>插入排序</p>
<p>判断数字是否在 number[] 中，剔除 number 中的该数字</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> MyExclude&lt;A <span class="keyword">extends</span> <span class="built_in">any</span>[], B <span class="keyword">extends</span> <span class="built_in">number</span>, N <span class="keyword">extends</span> <span class="built_in">any</span>[] = [], F <span class="keyword">extends</span> <span class="built_in">boolean</span> = <span class="literal">false</span>&gt; = (</span><br><span class="line">  A <span class="keyword">extends</span> [infer X, ...infer Y]</span><br><span class="line">    ? B <span class="keyword">extends</span> X</span><br><span class="line">      ? (</span><br><span class="line">        F <span class="keyword">extends</span> <span class="literal">true</span></span><br><span class="line">          ? MyExclude&lt;Y, B, [...N, X], F&gt;</span><br><span class="line">          : MyExclude&lt;Y, B, N, <span class="literal">true</span>&gt;</span><br><span class="line">      )</span><br><span class="line">      : MyExclude&lt;Y, B, [...N, X], F&gt;</span><br><span class="line">    : N</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Sort&lt;T <span class="keyword">extends</span> <span class="built_in">number</span>[], N <span class="keyword">extends</span> <span class="built_in">any</span>[] = [], I <span class="keyword">extends</span> <span class="built_in">any</span>[] = []&gt; = (</span><br><span class="line">  T[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> <span class="number">0</span> </span><br><span class="line">    ? N</span><br><span class="line">    : (</span><br><span class="line">      I[<span class="string">&#x27;length&#x27;</span>] <span class="keyword">extends</span> T[<span class="built_in">number</span>]</span><br><span class="line">        ? Sort&lt;MyExclude&lt;T, I[<span class="string">&#x27;length&#x27;</span>]&gt;, [...N, I[<span class="string">&#x27;length&#x27;</span>]]&gt;</span><br><span class="line">        : Sort&lt;T, N, [...I, <span class="built_in">any</span>]&gt;</span><br><span class="line">    )</span><br><span class="line">);</span><br></pre></td></tr></table></figure>



<h2 id="51-implement-Capitalize-lt-T-gt"><a href="#51-implement-Capitalize-lt-T-gt" class="headerlink" title="51. implement Capitalize&lt;T&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/capitalize">51. implement Capitalize&lt;T&gt;</a></h2><h3 id="题目-50"><a href="#题目-50" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>MyCapitalize&lt;T&gt;</code> to capitalize strings.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = MyCapitalize&lt;<span class="string">&#x27;bfe&#x27;</span>&gt; <span class="comment">// &#x27;Bfe&#x27;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>There is built-in <code>Capitalize&lt;T&gt;</code> in TypeScript, maybe you can try not to use it.</p>
</blockquote>
<h3 id="答案-50"><a href="#答案-50" class="headerlink" title="答案"></a>答案</h3><p>利用Uppercase将首字母转化为大写</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> MyCapitalize&lt;T <span class="keyword">extends</span> <span class="built_in">string</span>&gt; = </span><br><span class="line">T <span class="keyword">extends</span> <span class="string">`<span class="subst">$&#123;infer P&#125;</span><span class="subst">$&#123;infer U&#125;</span>`</span></span><br><span class="line"> ? <span class="string">`<span class="subst">$&#123;Uppercase&lt;P&gt;&#125;</span><span class="subst">$&#123;U&#125;</span>`</span> : T;</span><br></pre></td></tr></table></figure>



<h2 id="52-implement-Split-lt-S-D-gt"><a href="#52-implement-Split-lt-S-D-gt" class="headerlink" title="52. implement Split&lt;S, D&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/split">52. implement Split&lt;S, D&gt;</a></h2><h3 id="题目-51"><a href="#题目-51" class="headerlink" title="题目"></a>题目</h3><p>Just like <code>String.prototype.split()</code>, please implement <code>Split&lt;S, D&gt;</code>.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = Split&lt;<span class="string">&#x27;BFE.dev&#x27;</span>, <span class="string">&#x27;.&#x27;</span>&gt; <span class="comment">// [&#x27;BFE&#x27;, &#x27;dev&#x27;]</span></span><br><span class="line"><span class="keyword">type</span> B = Split&lt;<span class="string">&#x27;bfe.dev&#x27;</span>, <span class="string">&#x27;e&#x27;</span>&gt; <span class="comment">// [&#x27;bf&#x27;, &#x27;.d&#x27;, &#x27;v&#x27;]</span></span><br><span class="line"><span class="keyword">type</span> C = Split&lt;<span class="string">&#x27;bfe.bfe.bfe&#x27;</span>, <span class="string">&#x27;bfe&#x27;</span>&gt; <span class="comment">// [&#x27;&#x27;, &#x27;.&#x27;, &#x27;.&#x27;, &#x27;&#x27;]</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-51"><a href="#答案-51" class="headerlink" title="答案"></a>答案</h3><p>利用模板字符串分割</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Split&lt;S <span class="keyword">extends</span> <span class="built_in">string</span>, D <span class="keyword">extends</span> <span class="built_in">string</span>, A <span class="keyword">extends</span> <span class="built_in">string</span>[] = []&gt; =</span><br><span class="line">S <span class="keyword">extends</span> <span class="string">`<span class="subst">$&#123;infer P&#125;</span><span class="subst">$&#123;D&#125;</span><span class="subst">$&#123;infer R&#125;</span>`</span></span><br><span class="line">  ? Split&lt;R, D, [...A, P]&gt;</span><br><span class="line">  : [...A, S];</span><br></pre></td></tr></table></figure>



<h2 id="53-Implement-SnakeCase-lt-S-gt"><a href="#53-Implement-SnakeCase-lt-S-gt" class="headerlink" title="53. Implement SnakeCase&lt;S&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/snakecase">53. Implement SnakeCase&lt;S&gt;</a></h2><h3 id="题目-52"><a href="#题目-52" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>SnakeCase&lt;S&gt;</code> to turn string in camel case to snake case.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = SnakeCase&lt;<span class="string">&#x27;BigFrontEnd&#x27;</span>&gt; <span class="comment">// big_front_end</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-52"><a href="#答案-52" class="headerlink" title="答案"></a>答案</h3><p>将大写字母转成小写，且除首个之外前面加上<code>_</code></p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> isUpperCase&lt;T <span class="keyword">extends</span> <span class="built_in">string</span>&gt; = </span><br><span class="line">T <span class="keyword">extends</span> <span class="string">&#x27;&#x27;</span></span><br><span class="line">  ? <span class="literal">false</span></span><br><span class="line">  : (</span><br><span class="line">    Uppercase&lt;T&gt; <span class="keyword">extends</span> T ? <span class="literal">true</span> : <span class="literal">false</span></span><br><span class="line">  );</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Prefix&lt;T <span class="keyword">extends</span> <span class="built_in">string</span>, Skip <span class="keyword">extends</span> <span class="built_in">boolean</span>&gt; = </span><br><span class="line">Skip <span class="keyword">extends</span> <span class="literal">false</span></span><br><span class="line">  ? (</span><br><span class="line">    isUpperCase&lt;T&gt; <span class="keyword">extends</span> <span class="literal">true</span></span><br><span class="line">      ? <span class="string">`_<span class="subst">$&#123;Lowercase&lt;T&gt;&#125;</span>`</span> : T</span><br><span class="line">  ) : Lowercase&lt;T&gt;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> SnakeCase&lt;S <span class="keyword">extends</span> <span class="built_in">string</span>, Skip <span class="keyword">extends</span> <span class="built_in">boolean</span> = <span class="literal">true</span>&gt; =</span><br><span class="line">S <span class="keyword">extends</span> <span class="string">`<span class="subst">$&#123;infer A&#125;</span><span class="subst">$&#123;infer B&#125;</span>`</span></span><br><span class="line">  ? (</span><br><span class="line">    <span class="string">`<span class="subst">$&#123;Prefix&lt;A, Skip&gt;&#125;</span><span class="subst">$&#123;SnakeCase&lt;B, <span class="literal">false</span>&gt;&#125;</span>`</span></span><br><span class="line">  ) : S</span><br></pre></td></tr></table></figure>



<h2 id="54-Implement-CamelCase-lt-S-gt"><a href="#54-Implement-CamelCase-lt-S-gt" class="headerlink" title="54. Implement CamelCase&lt;S&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/camelcase">54. Implement CamelCase&lt;S&gt;</a></h2><h3 id="题目-53"><a href="#题目-53" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>CamelCase&lt;S&gt;</code> to turn string in snake case to camel case.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = CamelCase&lt;<span class="string">&#x27;big_front_end&#x27;</span>&gt; <span class="comment">// BigFrontEnd</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-53"><a href="#答案-53" class="headerlink" title="答案"></a>答案</h3><p>模板引擎替换首字母和第一个字母</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> CamelCase&lt;S <span class="keyword">extends</span> <span class="built_in">string</span>&gt; = </span><br><span class="line">S <span class="keyword">extends</span> <span class="string">`<span class="subst">$&#123;infer A&#125;</span>_<span class="subst">$&#123;infer B&#125;</span>`</span> ? </span><br><span class="line">  <span class="string">`<span class="subst">$&#123;Capitalize&lt;A&gt;&#125;</span><span class="subst">$&#123;CamelCase&lt;B&gt;&#125;</span>`</span></span><br><span class="line">  : Capitalize&lt;S&gt;</span><br></pre></td></tr></table></figure>



<h2 id="55-implement-StringToNumber-lt-S-gt"><a href="#55-implement-StringToNumber-lt-S-gt" class="headerlink" title="55. implement StringToNumber&lt;S&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-StringToNumber-S">55. implement StringToNumber&lt;S&gt;</a></h2><h3 id="题目-54"><a href="#题目-54" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>StringToNumber&lt;S&gt;</code> to convert string to number. You can assume strings are all valid non-negative integers.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = StringToNumber&lt;<span class="string">&#x27;12&#x27;</span>&gt; <span class="comment">// 12</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-54"><a href="#答案-54" class="headerlink" title="答案"></a>答案</h3><p>数组长度将字符串转数组转数字</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> StringToNumber&lt;S <span class="keyword">extends</span> <span class="built_in">string</span>, T <span class="keyword">extends</span> <span class="built_in">any</span>[] = []&gt; =</span><br><span class="line"> <span class="string">`<span class="subst">$&#123;T[<span class="string">&#x27;length&#x27;</span>]&#125;</span>`</span> <span class="keyword">extends</span> S ? T[<span class="string">&#x27;length&#x27;</span>] : StringToNumber&lt;S, [...T, <span class="built_in">any</span>]&gt; </span><br></pre></td></tr></table></figure>



<h2 id="56-implement-Abs-lt-N-gt"><a href="#56-implement-Abs-lt-N-gt" class="headerlink" title="56. implement Abs&lt;N&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Abs-N">56. implement Abs&lt;N&gt;</a></h2><h3 id="题目-55"><a href="#题目-55" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>Abs&lt;N&gt;</code> to get the absolute value of a number. You can assume the number are integers.</p>
<h3 id="答案-55"><a href="#答案-55" class="headerlink" title="答案"></a>答案</h3><p>负数转字符串再计算长度</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> StringToNumber&lt;S <span class="keyword">extends</span> <span class="built_in">string</span>, T <span class="keyword">extends</span> <span class="built_in">any</span>[] = []&gt; =</span><br><span class="line"> <span class="string">`<span class="subst">$&#123;T[<span class="string">&#x27;length&#x27;</span>]&#125;</span>`</span> <span class="keyword">extends</span> S ? T[<span class="string">&#x27;length&#x27;</span>] : StringToNumber&lt;S, [...T, <span class="built_in">any</span>]&gt; </span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Abs&lt;N <span class="keyword">extends</span> <span class="built_in">number</span>&gt; =</span><br><span class="line"><span class="string">`<span class="subst">$&#123;N&#125;</span>`</span> <span class="keyword">extends</span> <span class="string">`-<span class="subst">$&#123;infer A&#125;</span>`</span> ? Abs&lt;StringToNumber&lt;A&gt;&gt; : StringToNumber&lt;<span class="string">`<span class="subst">$&#123;N&#125;</span>`</span>&gt;</span><br></pre></td></tr></table></figure>



<h2 id="57-implement-ObjectPaths-lt-O-gt"><a href="#57-implement-ObjectPaths-lt-O-gt" class="headerlink" title="57. implement ObjectPaths&lt;O&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-ObjectPaths-O">57. implement ObjectPaths&lt;O&gt;</a></h2><h3 id="题目-56"><a href="#题目-56" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>ObjectPaths&lt;O&gt;</code> to return all valid paths to properties.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Obj = &#123;</span><br><span class="line">  a: &#123;</span><br><span class="line">    b: &#123;</span><br><span class="line">      c: <span class="number">1</span>,</span><br><span class="line">      d: <span class="number">2</span></span><br><span class="line">    &#125;,</span><br><span class="line">    e: <span class="number">1</span></span><br><span class="line">  &#125;,</span><br><span class="line">  f: <span class="number">3</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> A = ObjectPaths&lt;Obj&gt;</span><br><span class="line"><span class="comment">// &#x27;a.b.c&#x27; | &#x27;a.b.d&#x27; | &#x27;a.e&#x27; | &#x27;f&#x27;</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-56"><a href="#答案-56" class="headerlink" title="答案"></a>答案</h3><p>有难度，直接copy大佬的答案</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> Key = <span class="built_in">string</span> | <span class="built_in">number</span> | symbol;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Join&lt;L <span class="keyword">extends</span> Key | <span class="literal">undefined</span>, R <span class="keyword">extends</span> Key | <span class="literal">undefined</span>&gt; = L <span class="keyword">extends</span></span><br><span class="line">  | <span class="built_in">string</span></span><br><span class="line">  | <span class="built_in">number</span></span><br><span class="line">  ? R <span class="keyword">extends</span> <span class="built_in">string</span> | <span class="built_in">number</span></span><br><span class="line">    ? <span class="string">`<span class="subst">$&#123;L&#125;</span>.<span class="subst">$&#123;R&#125;</span>`</span></span><br><span class="line">    : L</span><br><span class="line">  : R <span class="keyword">extends</span> <span class="built_in">string</span> | <span class="built_in">number</span></span><br><span class="line">  ? R</span><br><span class="line">  : <span class="literal">undefined</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> Union&lt;</span><br><span class="line">  L <span class="keyword">extends</span> unknown | <span class="literal">undefined</span>,</span><br><span class="line">  R <span class="keyword">extends</span> unknown | <span class="literal">undefined</span></span><br><span class="line">&gt; = L <span class="keyword">extends</span> <span class="literal">undefined</span></span><br><span class="line">  ? R <span class="keyword">extends</span> <span class="literal">undefined</span></span><br><span class="line">    ? <span class="literal">undefined</span></span><br><span class="line">    : R</span><br><span class="line">  : R <span class="keyword">extends</span> <span class="literal">undefined</span></span><br><span class="line">  ? L</span><br><span class="line">  : L | R;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">type</span> ObjectPaths&lt;</span><br><span class="line">  T <span class="keyword">extends</span> <span class="built_in">object</span>,</span><br><span class="line">  Prev <span class="keyword">extends</span> Key | <span class="literal">undefined</span> = <span class="literal">undefined</span>,</span><br><span class="line">  Path <span class="keyword">extends</span> Key | <span class="literal">undefined</span> = <span class="literal">undefined</span></span><br><span class="line">&gt; = <span class="built_in">string</span> &amp;</span><br><span class="line">  &#123;</span><br><span class="line">    [K <span class="keyword">in</span> keyof T]: </span><br><span class="line">      <span class="comment">// T[K] is an object?.</span></span><br><span class="line">      T[K] <span class="keyword">extends</span> <span class="built_in">object</span></span><br><span class="line">      ? <span class="comment">// Continue extracting</span></span><br><span class="line">        ObjectPaths&lt;T[K], Union&lt;Prev, Path&gt;, Join&lt;Path, K&gt;&gt;</span><br><span class="line">      : <span class="comment">// Return all previous paths, including current key.</span></span><br><span class="line">        Join&lt;Path, K&gt;;</span><br><span class="line">  &#125;[keyof T];</span><br></pre></td></tr></table></figure>



<h2 id="58-implement-Diff-lt-A-B-gt"><a href="#58-implement-Diff-lt-A-B-gt" class="headerlink" title="58. implement Diff&lt;A, B&gt;"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/typescript/implement-Diff-A-B">58. implement Diff&lt;A, B&gt;</a></h2><h3 id="题目-57"><a href="#题目-57" class="headerlink" title="题目"></a>题目</h3><p>Implement <code>DiffKeys&lt;A, B&gt;</code> to return the keys either in A or B, but not in both.</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> A = DiffKeys&lt;&#123;<span class="attr">a</span>: <span class="number">1</span>, <span class="attr">b</span>: <span class="number">2</span>&#125;, &#123;<span class="attr">b</span>: <span class="number">1</span>, <span class="attr">c</span>: <span class="number">2</span>&#125;&gt; <span class="comment">// &#x27;a&#x27; | &#x27;c&#x27;</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-57"><a href="#答案-57" class="headerlink" title="答案"></a>答案</h3><p>借助Exclude</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> DiffKeys&lt;</span><br><span class="line">  A <span class="keyword">extends</span> Record&lt;<span class="built_in">string</span>, <span class="built_in">any</span>&gt;,</span><br><span class="line">  B <span class="keyword">extends</span> Record&lt;<span class="built_in">string</span>, <span class="built_in">any</span>&gt;</span><br><span class="line">&gt; = Exclude&lt;keyof A, keyof B&gt; | Exclude&lt;keyof B, keyof A&gt;</span><br></pre></td></tr></table></figure>


    </div>

    
    
    
      
<div>
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
</div>
        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/atom.xml">
            <span class="icon">
              <i class="fa fa-rss"></i>
            </span>

            <span class="label">RSS</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E5%89%8D%E7%AB%AF/" rel="tag"><i class="fa fa-tag"></i> 前端</a>
              <a href="/tags/bigfrontend/" rel="tag"><i class="fa fa-tag"></i> bigfrontend</a>
              <a href="/tags/%E9%A2%98%E5%BA%93/" rel="tag"><i class="fa fa-tag"></i> 题库</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2022/08/07/%E5%A4%8F%E5%A4%A9%E5%86%B0%E9%9B%AA%E5%B8%A6%E6%9D%A5%E7%9A%84%E7%B2%BE%E7%A5%9E%E5%86%85%E8%80%97/" rel="prev" title="夏天冰雪带来的精神内耗">
      <i class="fa fa-chevron-left"></i> 夏天冰雪带来的精神内耗
    </a></div>
      <div class="post-nav-item">
    <a href="/2022/09/09/bigfrontend%E7%9A%84CSS%E9%A2%98%E7%9B%AE%E8%AE%A8%E8%AE%BA/" rel="next" title="bigfrontend的CSS题目讨论">
      bigfrontend的CSS题目讨论 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    <div class="comments" id="valine-comments"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#TypeScript%E7%B1%BB%E5%9E%8B%E4%BD%93%E6%93%8D"><span class="nav-text">TypeScript类型体操</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-implement-Partial-lt-T-gt"><span class="nav-text">1. implement Partial&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-implement-Required-lt-T-gt"><span class="nav-text">2. implement Required&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-1"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-1"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-implement-Readonly-lt-T-gt"><span class="nav-text">3. implement Readonly&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-2"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-2"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-implement-Record-lt-K-V-gt"><span class="nav-text">4. implement Record&lt;K, V&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-3"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-3"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-implement-Pick-lt-T-K-gt"><span class="nav-text">5. implement Pick&lt;T, K&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-4"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-4"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-implement-Omit-lt-T-K-gt"><span class="nav-text">6. implement Omit&lt;T, K&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-5"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-5"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7-implement-Exclude-lt-T-E-gt"><span class="nav-text">7. implement Exclude&lt;T, E&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-6"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-6"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-implement-Extract-lt-T-U-gt"><span class="nav-text">8. implement Extract&lt;T, U&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-7"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-7"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9-implement-NonNullable-lt-T-gt"><span class="nav-text">9. implement NonNullable&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-8"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-8"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-implement-Parameters-lt-T-gt"><span class="nav-text">10. implement Parameters&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-9"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-9"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#11-implement-ConstructorParameters-lt-T-gt"><span class="nav-text">11. implement ConstructorParameters&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-10"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-10"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#12-implement-ReturnType-lt-T-gt"><span class="nav-text">12. implement ReturnType&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-11"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-11"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#13-implement-InstanceType-lt-T-gt"><span class="nav-text">13. implement InstanceType&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-12"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-12"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#14-implement-ThisParameterType-lt-T-gt"><span class="nav-text">14. implement ThisParameterType&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-13"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-13"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#15-implement-OmitThisParameter-lt-T-gt"><span class="nav-text">15. implement OmitThisParameter&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-14"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-14"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#16-implement-FirstChar-lt-T-gt"><span class="nav-text">16. implement FirstChar&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-15"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-15"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#17-implement-LastChar-lt-T-gt"><span class="nav-text">17. implement LastChar&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-16"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-16"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#18-implement-TupleToUnion-lt-T-gt"><span class="nav-text">18. implement TupleToUnion&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-17"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-17"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#19-implement-FirstItem-lt-T-gt"><span class="nav-text">19. implement FirstItem&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-18"><span class="nav-text">题目</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-18"><span class="nav-text">答案</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#20-implement-IsNever-lt-T-gt"><span class="nav-text">20. implement IsNever&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-19"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-19"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#21-implement-LastItem-lt-T-gt"><span class="nav-text">21. implement LastItem&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-20"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-20"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#22-implement-StringToTuple-lt-T-gt"><span class="nav-text">22. implement StringToTuple&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-21"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-21"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#23-implement-LengthOfTuple-lt-T-gt"><span class="nav-text">23. implement LengthOfTuple&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-22"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-22"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#24-implement-LengthOfString-lt-T-gt"><span class="nav-text">24. implement LengthOfString&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-23"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-23"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#25-implement-UnwrapPromise-lt-T-gt"><span class="nav-text">25. implement UnwrapPromise&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-24"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-24"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#26-implement-ReverseTuple-lt-T-gt"><span class="nav-text">26. implement ReverseTuple&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-25"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-25"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#27-implement-Flat-lt-T-gt"><span class="nav-text">27. implement Flat&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-26"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-26"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#28-implement-IsEmptyType-lt-T-gt"><span class="nav-text">28. implement IsEmptyType&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-27"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-27"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#29-implement-Shift-lt-T-gt"><span class="nav-text">29. implement Shift&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-28"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-28"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#30-implement-IsAny-lt-T-gt"><span class="nav-text">30. implement IsAny&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-29"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-29"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#31-implement-Push-lt-T-I-gt"><span class="nav-text">31. implement Push&lt;T, I&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-30"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-30"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#32-implement-RepeatString-lt-T-C-gt"><span class="nav-text">32. implement RepeatString&lt;T, C&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-31"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-31"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#33-implement-TupleToString-lt-T-gt"><span class="nav-text">33. implement TupleToString&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-32"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-32"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#34-implement-Repeat-lt-T-C-gt"><span class="nav-text">34. implement Repeat&lt;T, C&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-33"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-33"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#35-implement-Filter-lt-T-A-gt"><span class="nav-text">35. implement Filter&lt;T, A&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-34"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-34"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#36-implement-LargerThan-lt-A-B-gt"><span class="nav-text">36. implement LargerThan&lt;A, B&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-35"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-35"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#37-implement-SmallerThan-lt-A-B-gt"><span class="nav-text">37. implement SmallerThan&lt;A, B&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-36"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-36"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#38-implement-Add-lt-A-B-gt"><span class="nav-text">38. implement Add&lt;A, B&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-37"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-37"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#39-implement-ToNumber-lt-T-gt"><span class="nav-text">39. implement ToNumber&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-38"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-38"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#40-implement-UnionToIntersection-lt-T-gt"><span class="nav-text">40. implement UnionToIntersection&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-39"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-39"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#41-implement-FindIndex-lt-T-E-gt"><span class="nav-text">41. implement FindIndex&lt;T, E&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-40"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-40"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#42-implement-Equal-lt-A-B-gt"><span class="nav-text">42. implement Equal&lt;A, B&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-41"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-41"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#43-implement-Trim-lt-T-gt"><span class="nav-text">43. implement Trim&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-42"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-42"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#44-implement-ReplaceAll-lt-S-F-T-gt"><span class="nav-text">44. implement ReplaceAll&lt;S, F, T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-43"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-43"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#45-implement-Slice-lt-A-S-E-gt"><span class="nav-text">45. implement Slice&lt;A, S, E&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-44"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-44"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#46-implement-Subtract-lt-A-B-gt"><span class="nav-text">46. implement Subtract&lt;A, B&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-45"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-45"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#47-implement-Multiply-lt-A-B-gt"><span class="nav-text">47. implement Multiply&lt;A, B&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-46"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-46"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#48-implement-Divide-lt-A-B-gt"><span class="nav-text">48. implement Divide&lt;A, B&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-47"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-47"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#49-asserts-never"><span class="nav-text">49. asserts never</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-48"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-48"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#50-implement-Sort-lt-T-gt"><span class="nav-text">50. implement Sort&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-49"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-49"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#51-implement-Capitalize-lt-T-gt"><span class="nav-text">51. implement Capitalize&lt;T&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-50"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-50"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#52-implement-Split-lt-S-D-gt"><span class="nav-text">52. implement Split&lt;S, D&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-51"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-51"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#53-Implement-SnakeCase-lt-S-gt"><span class="nav-text">53. Implement SnakeCase&lt;S&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-52"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-52"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#54-Implement-CamelCase-lt-S-gt"><span class="nav-text">54. Implement CamelCase&lt;S&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-53"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-53"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#55-implement-StringToNumber-lt-S-gt"><span class="nav-text">55. implement StringToNumber&lt;S&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-54"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-54"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#56-implement-Abs-lt-N-gt"><span class="nav-text">56. implement Abs&lt;N&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-55"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-55"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#57-implement-ObjectPaths-lt-O-gt"><span class="nav-text">57. implement ObjectPaths&lt;O&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-56"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-56"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#58-implement-Diff-lt-A-B-gt"><span class="nav-text">58. implement Diff&lt;A, B&gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-57"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-57"><span class="nav-text">答案</span></a></li></ol></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="hxy"
      src="/images/Robben.gif">
  <p class="site-author-name" itemprop="name">hxy</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">80</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">8</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">120</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/huxingyi1997" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;huxingyi1997" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:huxingyi1997@zju.edu.cn" title="E-Mail → mailto:huxingyi1997@zju.edu.cn" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-frog"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">hxy</span>
</div>

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共1039.2k字</span>
</div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  




  
<script src="/js/local-search.js"></script>













  

  


<script>
NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
  NexT.utils.getScript('//unpkg.com/valine/dist/Valine.min.js', () => {
    var GUEST = ['nick', 'mail', 'link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item => {
      return GUEST.includes(item);
    });
    new Valine({
      el         : '#valine-comments',
      verify     : false,
      notify     : true,
      appId      : 'pQsO3ySbU4VtWN2j1FLA74Ha-gzGzoHsz',
      appKey     : 'QYacMDY2VY7Wazprg1X6FiUv',
      placeholder: "Just go go",
      avatar     : 'mm',
      meta       : guest,
      pageSize   : '10' || 10,
      visitor    : false,
      lang       : 'zh-cn' || 'zh-cn',
      path       : location.pathname,
      recordIP   : false,
      serverURLs : ''
    });
  }, window.Valine);
});
</script>

  
  <!-- 动态背景特效 -->
  <!-- 樱花特效 -->
    <script async src="/js/src/sakura.js"></script>
    <script async src="/js/src/fairyDustCursor.js"></script>
</body>
</html>
